About the Color Contrast Checker
This color contrast checker calculates the WCAG contrast ratio between a text colour and its background and tells you instantly whether the pair passes the AA and AAA levels for normal text, large text and user-interface components. Enter colours as hex (#767676), rgb(), hsl() or a CSS colour name; a translucent text colour is blended over the background first, the way a browser would draw it.
Designers use it to choose accessible brand palettes, developers to fix Lighthouse and axe accessibility warnings, and content editors to check buttons, links and text on images. If a pair fails, the checker suggests the nearest darker or lighter text colour that reaches 4.5:1, so you can keep your hue and still pass.
Results follow the WCAG 2.2 success criteria 1.4.3 (Contrast Minimum), 1.4.6 (Contrast Enhanced) and 1.4.11 (Non-text Contrast). Large text means at least 24px regular or about 18.66px (14pt) bold.
With the default inputs, the contrast ratio is 4.83 : 1. Change any value above to recalculate instantly.
How to use the color contrast checker
- 1Enter the text colour as hex, rgb(), hsl() or a colour name.
- 2Enter the background colour.
- 3Read the contrast ratio and the pass/fail result for each WCAG level.
- 4If it fails, copy the suggested nearest colour that passes AA or AAA.
- 5Re-check any hover, focus and disabled states the same way.
Formula and method
Each colour is converted to relative luminance. The 0–255 sRGB channels are divided by 255 and linearised (values ≤ 0.04045 are divided by 12.92, larger values use ((c + 0.055) ÷ 1.055)^2.4), then weighted 0.2126 red, 0.7152 green and 0.0722 blue because the eye is most sensitive to green.
The contrast ratio divides the lighter luminance plus 0.05 by the darker luminance plus 0.05, so it ranges from 1:1 (identical colours) to 21:1 (black on white). WCAG thresholds are not rounded: 4.49:1 fails the 4.5:1 requirement.
- L₁
- Relative luminance of the lighter colour
- L₂
- Relative luminance of the darker colour
- R, G, B
- Linearised sRGB channel values (0–1)
Worked examples
Gray body text on white
#6b7280 has a relative luminance of about 0.167 and white is 1.0, so the ratio is 1.05 ÷ 0.217 ≈ 4.83:1. That passes AA for all text sizes but misses AAA for body text, which needs 7:1.
Light gray placeholder text fails
#aaaaaa on white is only about 2.32:1, below even the 3:1 minimum for large text. Darkening it toward black, the first step that reaches 4.5:1 is #757575 at about 4.61:1.
White text on a blue button
The blue #2563eb has a luminance of about 0.153, so white text reaches (1.05) ÷ (0.203) ≈ 5.17:1 — fine for button labels at AA.
Frequently asked questions
What contrast ratio does WCAG require?+
WCAG AA requires 4.5:1 for normal text and 3:1 for large text and UI components such as input borders and icons. AAA requires 7:1 for normal text and 4.5:1 for large text.
What counts as large text?+
WCAG defines large text as at least 18 point (24 CSS pixels) regular weight, or at least 14 point (about 18.66 CSS pixels) bold. Anything smaller must meet the normal-text ratio.
Is 4.4:1 close enough to pass AA?+
No. WCAG thresholds are exact minimums and ratios are not rounded up, so 4.49:1 fails the 4.5:1 requirement. Nudge the colour slightly darker or lighter.
Does contrast apply to logos and disabled buttons?+
No. Text that is part of a logo or brand name, purely decorative text and inactive (disabled) controls are exempt from the WCAG contrast requirements.
What is the highest possible contrast ratio?+
Black (#000000) on white (#ffffff) gives the maximum of 21:1. Identical colours give the minimum of 1:1.