Color Contrast Checker (WCAG)
Check the contrast ratio between a text color and a background color against the WCAG AA and AAA levels.
Contrast checker
Type two colors. Pass or fail updates at once.
Contrast ratio
4.54 : 1
Preview
Sample text 123
Pass
AA, normal text (4.5 : 1)
Pass
AA, large text (3 : 1)
Fail
AAA, normal text (7 : 1)
Pass
AAA, large text (4.5 : 1)
Private: Everything runs in this page. Nothing you type is sent anywhere or saved.
On this page
Contrast examples
| Text on background | Ratio | AA normal text |
|---|---|---|
| #000000 on #ffffff | 21 : 1 | Pass |
| #767676 on #ffffff | 4.54 : 1 | Pass |
| #777777 on #ffffff | 4.47 : 1 | Fail |
| #0000ff on #ffffff | 8.59 : 1 | Pass |
| #ff0000 on #ffffff | 3.99 : 1 | Fail |
Formula
ratio = (L1 + 0.05) / (L2 + 0.05), L1 the lighter color's relative luminance
How the contrast checker works
- Step oneType the text color and the background color as HEX, RGB or HSL.
- Step twoThe ratio is worked out from the relative luminance of each color.
- Step threeCheck the four tiles. Large text means 18 point and up, or 14 point and up in bold.
What this tool does not do
- It uses the WCAG 2.x contrast formula only, not other methods.
- It checks two solid colors; it cannot check text on an image or a gradient.
- Passing the ratio does not make a design accessible on its own.
Frequently asked questions
What ratios do I need?
WCAG 2 asks for at least 4.5 to 1 for normal text and 3 to 1 for large text at level AA. Level AAA asks for 7 to 1 and 4.5 to 1.
Why is the ratio shown rounded down?
So that a value just under a limit is never shown as passing. The ratio is cut to two decimals, not rounded up.
Does it check images and gradients?
No. It compares two flat colors.