Color Contrast Checker
Enter a text color and a background color and get the WCAG 2.2 contrast ratio, a pass or fail for AA and AAA at normal and large text sizes and for UI graphics, and the nearest colors that do pass. Use it for slides, posters, figures and web pages. It runs in your browser — nothing is uploaded. Free, no sign-up.
Contrast result
4.47:1
Contrast ratio
Normal text — the quick brown fox jumps over the lazy dog (16 px).
Large text, 24 px (18 pt)
Large bold text, 18.7 px (14 pt)
Button or icon
Shown rounded down to two decimals: WCAG does not round a near miss up, so 4.499 fails 4.5.
| Requirement | Needs | Result |
|---|---|---|
| Normal text, AA (1.4.3) | 4.5:1 | Fail |
| Normal text, AAA (1.4.6) | 7:1 | Fail |
| Large text, AA (1.4.3) | 3:1 | Pass |
| Large text, AAA (1.4.6) | 4.5:1 | Fail |
| UI components and graphics, AA (1.4.11) | 3:1 | Pass |
Large text means at least 18 pt (24 px) regular or 14 pt (about 18.7 px) bold. On slides and posters, body text is usually large; footnotes and captions often are not.
Suggested colors that pass
Change the text color
Change the background
Each suggestion keeps the hue and saturation and changes only the lightness, by the smallest step that passes.
How to Use the Color Contrast Checker
- 1. Enter the two colors. Type each as HEX (
#777777),rgb(),hsl()or a CSS name, or use the picker. Swap exchanges them, which is handy for checking light-on-dark and dark-on-light versions. - 2. Read the ratio and the table. The ratio runs from 1:1 (identical colors) to 21:1 (black on white). The table compares it with each WCAG requirement and says Pass or Fail in words, not only color.
- 3. Decide the size. Large text has lower requirements. The preview shows normal text, large text, bold large text and a bordered control so you can judge your own case.
- 4. Fix a failing pair. Choose the level you are aiming for and use the suggested text color or background. The tool keeps the hue and changes only the lightness, by the smallest step that passes.
What WCAG 2.2 Requires
The Web Content Accessibility Guidelines (WCAG) 2.2 set minimum contrast ratios in three success criteria. The ratio is (L₁ + 0.05) ÷ (L₂ + 0.05), where L₁ is the relative luminance of the lighter color and L₂ of the darker one.
| Criterion | Level | Normal text | Large text |
|---|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | 4.5:1 | 3:1 |
| 1.4.6 Contrast (Enhanced) | AAA | 7:1 | 4.5:1 |
| 1.4.11 Non-text Contrast | AA | 3:1 for UI components and meaningful graphics | — |
Large text is at least 18 point, or 14 point bold — 24 px and about 18.7 px on a screen at 96 dpi. Logos, purely decorative text and inactive controls are exempt from 1.4.3. The 3:1 rule in 1.4.11 covers the parts of a control needed to find it (a button’s border, a checkbox’s outline), its states such as focus, and the graphics a reader needs to understand content, such as the lines in a chart.
How the Ratio Is Calculated
Each sRGB channel is scaled to 0–1 and linearised: c ÷ 12.92 if c ≤ 0.04045, otherwise ((c + 0.055) ÷ 1.055)2.4. Relative luminance is then 0.2126 R + 0.7152 G + 0.0722 B. Green counts most because the eye is most sensitive to it.
The 0.03928 typo
WCAG 2.0 and 2.1 print the threshold as 0.03928, a leftover from an early draft of the sRGB standard, which uses 0.04045. The WCAG 2.2 glossary corrected it to 0.04045 and notes that the difference changes no practical result. This checker uses 0.04045.
A pair that fails by a hair
#777777 on white: 4.48:1 — fails AA for normal text (needs 4.5:1), passes for large text.
#767676 on white: 4.54:1 — the lightest grey that passes AA on white.
#0000ff on white: 8.59:1 — passes AAA. #ff0000 on white: 4.0:1 — fails AA for normal text.
WCAG does not round: a ratio of 4.4999 fails 4.5. The checker therefore shows the ratio rounded down to two decimals, so a near miss is never displayed as a pass.
Checking Slides, Posters and Figures
- Slides and posters are not web pages, but WCAG’s ratios are the accepted yardstick for them too. Body text on a slide is usually large (24 px is 18 pt); captions, footnotes and axis labels are not, so check them as normal text.
- Aim above the minimum for projection. A projector in a lit room lowers contrast for everyone. Choose AAA (7:1) for text on a slide you will show in a bright room.
- Text over a photograph or gradient has no single background. Check the lightest and darkest areas behind the text, or put the text on a solid panel.
- Charts and figures fall under 1.4.11: lines, bars and markers need 3:1 against the background. Color alone should not carry the meaning — see the Color Blindness Simulator.
- Translucent colors are flattened before measuring: the background over white, then the text over the background. A page with something else behind it needs that color entered directly.
A Note on APCA
The Accessible Perceptual Contrast Algorithm (APCA) is a candidate method in the working draft of WCAG 3, which accounts for text size, weight and polarity. It is a draft, not a requirement, and no law or standard currently asks for it. WCAG 2.x ratios — the ones in this tool — remain the basis for conformance claims.
Frequently Asked Questions
- What is a good contrast ratio?
- 4.5:1 or higher for normal text meets WCAG AA, and 7:1 meets AAA. Large text needs 3:1 for AA and 4.5:1 for AAA. Black on white is the maximum, 21:1. Anything below 3:1 is hard to read for many people, even with good vision.
- What counts as large text in WCAG?
- Text that is at least 18 point (24 px) in regular weight, or at least 14 point (about 18.7 px) in bold. Size is measured as displayed, so a slide font that looks small on a handout may still be large when projected.
- Does the contrast requirement apply to icons and chart lines?
- Yes, through success criterion 1.4.11 Non-text Contrast: user-interface components and graphics needed to understand the content must have at least 3:1 against adjacent colors. Decorative graphics and inactive components are exempt.
- Why does my color show 4.49 when the ratio is nearly 4.5?
- Because WCAG compares the exact ratio and gives no credit for rounding. A pair at 4.4999:1 fails the 4.5:1 requirement, so the tool shows the value rounded down to two decimals rather than 4.50.
- How do the suggested colors work?
- The tool keeps your color’s hue and saturation and moves its HSL lightness up or down in small steps, returning the closest value that reaches the target ratio as an 8-bit HEX code. If no lightness can reach it — 7:1 against a mid grey, for example — it says so and suggests changing the other color.
- Is APCA better than the WCAG ratio?
- APCA models perception more closely, especially for dark mode and thin text, but it is part of a draft (WCAG 3), not an accepted requirement. Accessibility laws and procurement standards that cite WCAG 2.x use the ratio computed here.