Color Contrast Checker
Type or pick a text colour and a background. You get the WCAG 2.2 ratio with every pass and fail, the APCA lightness contrast, a live preview, and the closest colour that passes if yours doesn’t.
Hex, rgb(), hsl(), oklch() or a CSS name, for either colour.
Contrast ratio, WCAG 2.2
4.02:1
Large text and icons only: body text needs 4.5:1.
APCA Lc 67.6Other content text: labels, short lines
Nearest colours that pass
The smallest change in lightness that reaches the level, keeping the hue. Tap Use it to try one.
AA, 4.5:1
- Change the text#72777F4.50:1
- Or the background#1615164.52:1
AAA, 7:1
- Change the text#5559617.02:1
- Or the background: no colour of this hue gets there. Try the other colour.
How this works: Method, 8 sources, Checked against 2 worked examples,
How this works
Method
WCAG 2.2 compares the relative luminance of the two colours: how much light each one sends to the eye, from 0 for black to 1 for white. Each channel is first converted from its stored value back to linear light, because screens store colours with a gamma curve, then the three are weighted by how sensitive the eye is to them, green most and blue least. The ratio is the lighter luminance plus 0.05 over the darker plus 0.05, giving numbers from 1:1 (the same colour) to 21:1 (black on white). Full method
Sources
- W3C, Understanding WCAG 2.2 Success Criterion 1.4.3: Contrast (Minimum)
- W3C, Understanding WCAG 2.2 Success Criterion 1.4.11: Non-text Contrast
- Myndex, SAPC-APCA documentation (APCA-W3 0.0.98G-4g)
- W3C: WCAG 2.1, Success Criterion 1.4.3 Contrast (Minimum)
- W3C, WCAG 2.2: definitions of contrast ratio and relative luminance
- W3C, CSS Color Module Level 4
- Björn Ottosson (2020), A perceptual color space for image processing
- Machado, Oliveira and Fernandes (2009), A Physiologically-based Model for Simulation of Color Vision Deficiency
How it’s tested
2 worked examples for this page are checked by automated tests before every release: given the inputs, the tool must show the expected answer.
Changes
- Added eight pages: a colour picker for photos, a WCAG 2.2 and APCA contrast checker, a palette generator, a colour blindness simulator, and hex, RGB and CMYK converters.
- Redesigned: paste a colour in any format, HSV and CMYK added, opacity, a contrast check against white and black text, and colour harmonies.
- Fixed a crash when opening the colour picker.
- First published.
How contrast is measured
WCAG 2.2 compares the relative luminance of the two colours: how much light each one sends to the eye, from 0 for black to 1 for white. Each channel is first converted from its stored value back to linear light, because screens store colours with a gamma curve, then the three are weighted by how sensitive the eye is to them, green most and blue least. The ratio is the lighter luminance plus 0.05 over the darker plus 0.05, giving numbers from 1:1 (the same colour) to 21:1 (black on white).
The thresholds are fixed: 4.5:1 for normal text and 3:1 for large text at AA, the level most laws and policies point to, and 7:1 and 4.5:1 at AAA. Large means at least 24 CSS pixels, or about 18.7 pixels in bold. Icons, input borders and focus indicators need 3:1 against what is next to them. A ratio is not rounded: 4.49:1 fails.
APCA is a newer method, developed for the WCAG 3 work but not part of any published WCAG standard. It gives a lightness contrast, Lc, that depends on which colour is the text and which the background, and treats dark backgrounds more realistically. The page shows both: pass WCAG 2.2 for compliance, and use APCA as a second opinion when choosing between colours that both pass.
ratio = (L lighter + 0.05) ÷ (L darker + 0.05), L = 0.2126 R + 0.7152 G + 0.0722 B (linear)
- WCAG 2.2 Success Criterion 1.4.3 requires a contrast ratio of at least 4.5:1 for text and 3:1 for large-scale text at level AA. Source: W3C, Understanding WCAG 2.2 Success Criterion 1.4.3: Contrast (Minimum).
- Success Criterion 1.4.11 asks for 3:1 for the parts of user interface components and graphics needed to understand them, such as input borders and chart lines. Source: W3C, Understanding WCAG 2.2 Success Criterion 1.4.11: Non-text Contrast.
- APCA’s guidance puts body text at Lc 75 or more, preferably 90; grey #888888 on white scores Lc 63.1, short of the body-text minimum. Source: Myndex, SAPC-APCA documentation (APCA-W3 0.0.98G-4g).
Greys on white and on black
The WCAG 2.2 ratio of common greys as text on white and on black. #767676 is the lightest grey that passes AA as body text on white.
| Grey | On white | On black | Body text on white |
|---|---|---|---|
| #000000 | 21.00:1 | 1.00:1 | AAA |
| #222222 | 15.90:1 | 1.31:1 | AAA |
| #444444 | 9.73:1 | 2.15:1 | AAA |
| #595959 | 7.00:1 | 2.99:1 | AAA |
| #666666 | 5.74:1 | 3.65:1 | AA |
| #767676 | 4.54:1 | 4.62:1 | AA |
| #777777 | 4.47:1 | 4.68:1 | Large text only |
| #808080 | 3.94:1 | 5.31:1 | Large text only |
| #959595 | 2.99:1 | 7.01:1 | Fails |
| #AAAAAA | 2.32:1 | 9.03:1 | Fails |
Show all 12 rowsShow fewer
| #CCCCCC | 1.60:1 | 13.07:1 | Fails |
| #FFFFFF | 1.00:1 | 21.00:1 | Fails |
Frequently Asked Questions
What contrast ratio do I need?
For most websites and apps, aim for WCAG 2.2 level AA: at least 4.5:1 for body text and 3:1 for large text, icons and the borders of controls. AAA, 7:1 for body text, is worth reaching for long reading and for audiences with low vision.
Should I use APCA instead of WCAG 2?
Not instead. WCAG 2.2 is the standard that laws, contracts and audits refer to, so a page should pass it. APCA is a research-backed alternative that some teams use alongside it, especially for dark themes, where WCAG 2 can approve pairs that are hard to read and reject ones that read fine.
How is the nearest passing colour found?
The page keeps the colour’s hue and colourfulness in OKLCH and moves only its lightness, lighter and darker, until the ratio reaches the level. It offers whichever direction needs the smaller change, for the text and for the background, so you can keep the brand colour where it matters most.
Does transparency count?
Contrast is measured between the colours you actually see. A semi-transparent text colour mixes with the background behind it, so work out the blended colour first (or pick it from a screenshot with the colour picker) and check that against the background.