WCAG Contrast Checker
Compute color contrast ratio per WCAG 2.1 SC 1.4.3. Pass/fail verdict for AA + AAA at normal and large text sizes, plus UI component contrast (3:1). Live preview.
WCAG Contrast Checker
The quick brown fox jumps over the lazy dog.
Normal text — 16px regular body copyLarge heading text
Large text — about 24px regular, or about 18.5px boldHow to use the WCAG Contrast Checker
Enter your foreground (text) and background colors
Use the color pickers for visual selection or type 6-digit hex codes directly. Both work in sync — typing a hex updates the picker, picking a color updates the hex. 3-digit shorthand (#FFF) is auto-expanded to 6-digit. A useful reference point: #222 on #FFF computes to 15.91:1. The values the page loads with are this site's own body text, #1a1814 on #f7f6f3, which comes to 16.40:1.
Read the contrast ratio and verdict cards
The big number is the contrast ratio from WCAG's relative-luminance definition, unchanged from WCAG 2.0 through 2.2. The five verdict cards are the thresholds the guidelines actually set: AA Normal 4.5:1 (SC 1.4.3), AA Large 3:1 (the same criterion's large-text exception), AAA Normal 7:1 and AAA Large 4.5:1 (SC 1.4.6 Contrast (Enhanced)), and UI Components 3:1 (SC 1.4.11 Non-text Contrast, which covers controls and meaningful graphics rather than text). "Large" has a definition rather than a feel — see step 4.
Verify with the live preview
The two preview boxes render real text in your colours, one at body size and one at heading size. Use them as a sanity check on the number rather than as the verdict: the ratio is a luminance calculation and knows nothing about stroke weight, and WCAG says so — fonts with extraordinarily thin strokes or unusual features
are harder to read, especially at lower contrast levels
. A hairline typeface at 4.6:1 is a worse choice than the number suggests.
Check whether your text is actually "large"
The 3:1 relaxation applies only to large scale (text)
, which WCAG 2.2 defines as at least 18 point or 14 point bold or font size that would yield equivalent size for Chinese, Japanese and Korean (CJK) fonts
. The Understanding document converts that with 1pt = 1.333px, making 14pt and 18pt equivalent to approximately 18.5px and 24px
. A 22px heading is not large text, whatever it looks like, and needs the full 4.5:1. Note also what the size is measured on: WCAG says font size is the size when the content is delivered
and excludes any resizing the user applies afterwards.
Color contrast — the math behind accessibility
WCAG 2.2 — W3C Recommendation, 12 December 2024 — defines relative luminance for the sRGB colour space as L = 0.2126·R + 0.7152·G + 0.0722·B, where each channel is first divided by 255 and then linearised: c/12.92 below the threshold, ((c+0.055)/1.055)^2.4 above it. The contrast ratio is (L1 + 0.05) / (L2 + 0.05) with the lighter colour on top. Those three weights are not a WCAG invention — the guidelines note the formula is taken from [SRGB]
, the sRGB specification — and they are why a saturated green reads far brighter than a saturated blue of the same nominal intensity. The 0.05 is a fixed flare term; it is what caps the scale at 21:1, since pure white over pure black is (1.00 + 0.05) / (0.00 + 0.05).
Because the ratio is built from luminance alone, it is deliberately blind to hue. The Understanding document explains why that is the right design rather than a shortcut: for people with color vision deficiency who are not able to distinguish certain shades of color, hue and saturation have minimal or no effect on legibility as assessed by reading performance
, and light-dark perception is unaffected. One documented exception — the use of predominantly long wavelength colors against darker colors (generally appearing black) for those who have protanopia
, which is why red on black carries its own advisory technique. A passing ratio is not a promise that a red-on-black pairing will read.
Where 4.5:1 and 7:1 come from
They are derived, and the derivation is published. The Understanding document for SC 1.4.3 starts from adoption of the 3:1 contrast ratio for minimum acceptable contrast for normal observers, in the ANSI standard
, then applies an empirical result: in the population, visual acuity of 20/40 is associated with a contrast sensitivity loss of roughly 1.5
. Multiply: 3 × 1.5 = 4.5:1. Repeat the logic for 20/80 acuity and you get the 7:1 of SC 1.4.6.
It is worth being accurate about who that describes, because this page previously was not. WCAG says 20/40 is commonly reported as typical visual acuity of elders at roughly age 80
— not of most adults over 50. The thresholds compensate for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging
, taken together. There is no claim, in WCAG or here, that sub-4.5:1 text measurably slows readers with unimpaired vision.
Contrast is one criterion, not the whole of colour accessibility
This page answers SC 1.4.3 and 1.4.6 for a pair of solid colours, and SC 1.4.11 for a control. It cannot answer SC 1.4.1 Use of Colour, which is a separate requirement that colour not be the only visual means of conveying information — an error state that is red and nothing else fails 1.4.1 at any contrast ratio. Nor does it know what the colours are for: WCAG exempts text that is part of a logo or brand name
and text that is pure decoration
or part of an inactive user interface component
from the contrast requirement entirely. The ratio is the same number; whether it has to clear a threshold is a judgement about the content, and it stays yours.
How the contrast ratio is derived, and what it cannot see
The ratio is (L1 + 0.05) / (L2 + 0.05) over relative luminance, lighter colour first. The 0.05 is a flare term, and it is what makes the scale finite: white over black is 1.05 / 0.05 = exactly 21:1.
The weights 0.2126R + 0.7152G + 0.0722B are not WCAG's own: the guidelines say the formula is taken from [SRGB]
. Green carries nearly three quarters of the luminance, which is why changing the blue channel barely moves the number.
4.5:1 is a multiplication, not a vote. Understanding SC 1.4.3 takes the 3:1 contrast ratio for minimum acceptable contrast for normal observers, in the ANSI standard
and multiplies by the 1.5 contrast-sensitivity loss associated with 20/40 acuity. The same logic at 20/80 gives the 7:1 of SC 1.4.6.
20/40 is not "most adults over 50". WCAG says it is commonly reported as typical visual acuity of elders at roughly age 80
. The threshold covers acuity loss, colour deficiency and age-related contrast-sensitivity loss together.
"Large" is a measurement. WCAG 2.2: at least 18 point or 14 point bold
, or the CJK equivalent. The Understanding document converts at 1pt = 1.333px, giving approximately 18.5px and 24px
. A 22px heading takes the full 4.5:1.
Hue is excluded on purpose. WCAG: for people with color vision deficiency who are not able to distinguish certain shades of color, hue and saturation have minimal or no effect on legibility as assessed by reading performance
. Luminance is the property that survives.
One hue does escape the maths. The Understanding document names the use of predominantly long wavelength colors against darker colors (generally appearing black) for those who have protanopia
— red on black — and gives it a separate advisory technique. A passing ratio does not clear it.
Some text has no contrast requirement at all. SC 1.4.3 exempts text in a logo or brand name, text that is pure decoration
, text in an inactive component, and text that is part of a picture containing significant other visual content.
The linearisation threshold changed in 2021 and nothing moved. WCAG's own note: the 0.04045 was different (0.03928)
before May 2021 and the change has no practical effect
. For 8-bit hex input it is provably none — no channel value 0-255 falls between the two.
The number knows nothing about the typeface. WCAG notes that fonts with extraordinarily thin strokes or unusual features and characteristics that reduce the familiarity of their letter forms are harder to read, especially at lower contrast levels
— a hairline face at 4.6:1 is a worse choice than it scores.
Frequently Asked Questions
-
They are two separate success criteria with different derivations, not two strictnesses of one rule. AA is SC 1.4.3 Contrast (Minimum) at 4.5:1 for body text and 3:1 for large text, derived from 20/40 acuity. AAA is SC 1.4.6 Contrast (Enhanced) at 7:1 and 4.5:1, derived the same way from 20/80. W3C's own guidance on conformance is that AAA is not proposed as a whole-site requirement, because for some content it cannot be met — so treat AAA as a target for specific surfaces (long-form reading, error and legal text) rather than a site-wide grade.
-
WCAG 2.2 defines
large scale (text)
asat least 18 point or 14 point bold or font size that would yield equivalent size for Chinese, Japanese and Korean (CJK) fonts
. Points, not pixels — the Understanding document supplies the conversion at 1pt = 1.333px and calls 14pt and 18ptequivalent to approximately 18.5px and 24px
. Two details people miss. The size isthe size when the content is delivered
, so a user zooming in does not make your text large. And the definition is normative for the exception only: a 22px semibold heading is normal text and needs 4.5:1, however large it looks next to the body copy. -
It is 3 × 1.5, and both factors are named in the Understanding document. The 3 is
the 3:1 contrast ratio for minimum acceptable contrast for normal observers, in the ANSI standard
. The 1.5 isthe empirical finding that in the population, visual acuity of 20/40 is associated with a contrast sensitivity loss of roughly 1.5
— soa user with 20/40 would thus require a contrast ratio of 3 * 1.5 = 4.5 to 1
. The same construction at 20/80 acuity produces the 7:1 of SC 1.4.6. Who is 20/40? WCAG's own answer: itis commonly reported as typical visual acuity of elders at roughly age 80
. It is not, as this page used to say, most adults over 50 — and there is no WCAG claim that text below 4.5:1 measurably slows readers with unimpaired vision. -
Different criteria apply, so the same 3:1 card can mean different things. SC 1.4.11 Non-text Contrast requires 3:1 against adjacent colour for the visual information needed to identify user-interface components and states, and for the parts of a graphic required to understand the content — a chart's data series qualifies, a decorative flourish does not. SC 1.4.3 exempts logos outright:
text that is part of a logo or brand name has no contrast requirement
, though the Understanding document warns that this becomesproblematic when logos or logotypes act as user interface components
, such as a home link. For charts specifically, note that contrast does not discharge SC 1.4.1: a legend distinguished only by colour fails regardless of the ratios. The checker computes any two-colour pair; deciding which criterion the pair falls under is a judgement about the content. -
They measure different things and are not interchangeable. The WCAG ratio arrived with WCAG 2.0 in 2008 and is unchanged through WCAG 2.2 (Recommendation, 12 December 2024): relative luminance, a fixed 0.05 flare term, a symmetric ratio. Because it is symmetric, it gives the same answer whether your text is light on dark or dark on light — a known limitation, since the two are not equally readable in practice. APCA reports a polarity-aware lightness contrast (Lc) instead, and is one of the candidate methods explored in drafts of WCAG 3.0. WCAG 3.0 is a Working Draft: it is not a Recommendation, nothing is required to conform to it, and its contrast method is not settled. This page computes the WCAG 2.x ratio, which is what every current conformance claim is written against.
-
Common problem — brand color decks often have insufficient contrast. Solutions: (1) Darken the brand color for text use, lighter version for decorative use. (2) Use brand colors only for accents, with high-contrast neutrals for body text. (3) Pair brand color with white or black depending on luminance — typically dark brand colors get white text, light brand colors get dark text. (4) Reserve low-contrast brand combos for headings only (where AA Large 3:1 applies). Many large brands maintain "primary" and "accessible" variants of each brand color for different uses.
-
No, and WCAG itself says why. Colour alone still fails separately. SC 1.4.1 Use of Colour is a distinct criterion that a perfect ratio does not satisfy. One hue is a known exception — the Understanding document singles out long-wavelength colours against near-black for readers with protanopia, and gives red-on-black its own advisory technique. The maths ignores the typeface: WCAG notes that fonts with
extraordinarily thin strokes or unusual features
are harder to readespecially at lower contrast levels
. And the ratio is symmetric, so it cannot tell you that light-on-dark and dark-on-light at the same score read differently. Treat the number as a floor that can be checked automatically, not as an account of legibility. -
The requirement is per-point, which is what makes it hard: SC 1.4.3 asks for a ratio between the text and its background, and a varying background has no single value to test — so the criterion has to hold at the worst point the glyphs actually touch, not at an average. For dark text that is the lightest region; for light text, the darkest. The only exemption nearby is narrow: text
that is part of a picture that contains significant other visual content
has no contrast requirement, which covers a photograph with incidental writing in it, not your hero headline. Practical fixes are to put a solid or semi-transparent scrim between image and text, or to give the text its own filled container — both convert a varying background into a measurable one. A text-shadow can help perceptually but gives you nothing to paste into this tool. -
No. All calculations run entirely in your browser via JavaScript. There's no server roundtrip — open DevTools → Network and confirm zero outbound requests. Your color values stay on your device. Safe for confidential brand work, unannounced design systems, or any UI work that shouldn't leave your machine.
-
Not a question this page can answer for you, and an earlier version of it named instruments and requirements we could not verify — so here is only what is checkable. Level AA of WCAG is the level that public-procurement and public-sector rules generally reference rather than AAA, and it is referenced indirectly: the European standard EN 301 549 sets the requirements, and Directive (EU) 2019/882 — the European Accessibility Act, applicable from 28 June 2025 — states functional requirements for which a harmonised standard confers presumption of conformity. So "the law requires WCAG AA" is a shorthand for a chain of documents, and the chain differs by country and by whether the service is public or private.
If you need a defensible answer for a particular market, read the instrument rather than a summary. What is safe to say without one: AA is the level the tooling, procurement language and harmonised standards are built around, and a design that clears it is not the thing that will fail an audit.
Method & sources
How it computes
Computes the WCAG contrast ratio (L1 + 0.05) / (L2 + 0.05), where relative luminance is L = 0.2126R + 0.7152G + 0.0722B over sRGB channels linearised as c/12.92 below the threshold and ((c+0.055)/1.055)^2.4 above it. Verdicts are the published thresholds: SC 1.4.3 at 4.5:1 normal and 3:1 large, SC 1.4.6 at 7:1 and 4.5:1, and SC 1.4.11 at 3:1 for user-interface components and meaningful graphics.
What this tool implements
- WCAG 2.2 (W3C Recommendation, 12 December 2024) relative-luminance definition, which is unchanged from WCAG 2.0. The guidelines state the formula is 'taken from [SRGB]', so the three coefficients are the sRGB specification's, not WCAG's own.
- The five verdicts are three different success criteria, and the page now names which is which: AA Normal and AA Large are the two halves of SC 1.4.3 Contrast (Minimum); AAA Normal and AAA Large are SC 1.4.6 Contrast (Enhanced); UI Components is SC 1.4.11 Non-text Contrast, which governs controls and meaningful graphics rather than text.
- 'Large scale (text)' is quoted rather than paraphrased: 'at least 18 point or 14 point bold or font size that would yield equivalent size for Chinese, Japanese and Korean (CJK) fonts'. The pixel figures come from the Understanding document's own conversion — 1pt = 1.333px, 'approximately 18.5px and 24px' — not from arithmetic performed here.
- The 4.5:1 and 7:1 thresholds are presented with their derivation from Understanding SC 1.4.3: the ANSI 3:1 baseline multiplied by the 1.5 contrast-sensitivity loss associated with 20/40 acuity, and the same construction at 20/80.
- The page states the exemptions SC 1.4.3 grants — logo or brand name, pure decoration, inactive user-interface component, and text inside a picture containing significant other visual content — because a checker that returns only a number invites the assumption that every ratio must clear a threshold.
- Limits of the metric are stated, all from WCAG's own notes: hue is excluded by design; long-wavelength colours against near-black are a documented exception for protanopia; thin-stroked or unfamiliar letterforms are 'harder to read, especially at lower contrast levels'; and the ratio is symmetric, so it cannot distinguish light-on-dark from dark-on-light.
Sources
- Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation 12 December 2024 — the relative luminance and contrast ratio definitions, SC 1.4.3 Contrast (Minimum) with its four exceptions, SC 1.4.6 Contrast (Enhanced), SC 1.4.11 Non-text Contrast, SC 1.4.1 Use of Color, and the 'large scale (text)' definition with its three notes: https://www.w3.org/TR/WCAG22/
- Understanding SC 1.4.3 Contrast (Minimum), W3C WAI — the 3 x 1.5 derivation of 4.5:1, the 20/40 and 20/80 acuity basis, the 1pt = 1.333px conversion to 'approximately 18.5px and 24px', the protanopia advisory on long-wavelength colours against black, and the logo-as-control caveat: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
- IEC 61966-2-1:1999, Multimedia systems and equipment — Colour measurement and management — Part 2-1: Default RGB colour space — sRGB. The source WCAG cites for the luminance coefficients and the transfer function: https://webstore.iec.ch/publication/6169
- Arditi A, Faye E. Monocular and binocular letter contrast sensitivity and letter acuity in a diverse ophthalmologic practice. Optometry and Vision Science 2004;81(12s):287. The [ARDITI-FAYE] reference behind the 1.5 contrast-sensitivity factor.
- Directive (EU) 2019/882 of the European Parliament and of the Council of 17 April 2019 on the accessibility requirements for products and services (European Accessibility Act), applicable from 28 June 2025: https://eur-lex.europa.eu/eli/dir/2019/882/oj
What can make this go out of date
- None at runtime. Both colours are entered by the reader and every figure is computed in the browser; nothing is transmitted.
- The thresholds are fixed by W3C Recommendations and move only when a new WCAG version changes them; 1.4.3 and 1.4.6 have been stable since WCAG 2.0 (2008).
Abridged — the full review record for this tool runs longer than the list above.
Embed this tool
Pick up where you left off
Stored only in this browser — never sent to our servers.