WCAG Color Contrast Checker: Ratio and the Closest Color That Passes
Check the WCAG contrast ratio of a text and background color for AA and AAA, then get the closest lighter or darker color that passes. Runs in your browser.
The colours are checked in this browser. Nothing is uploaded or sent to a server.
The tool failed to load. Please reload the page.
Report a problem or suggest an improvement
Nothing is sent until you press Send. Your measurements are included only if you tick the box, and you can see the full report below first.
When to use this
- You are picking text or button colors and need to know if they meet WCAG AA or AAA.
- A color fails and you want the nearest shade that passes instead of guessing.
- You want a link to a color pair to send to a designer or developer.
How to use
- Type the text color and the background color as hex codes, such as #333 or #1a73e8.
- Press Check contrast to see the ratio and each WCAG check.
- If a check fails, read the closest passing text color or background color in the suggestions.
- Copy the result or a link to the pair.
Examples
- Grey text on white: #767676 on #ffffff gives 4.54 : 1, just above the 4.5 : 1 needed for AA normal text. #777777 gives 4.48 : 1 and fails.
- Black on white: #000000 on #ffffff is the maximum, 21 : 1, and passes every check.
Understanding the result
Each color is turned into a relative luminance between 0 (black) and 1 (white). The contrast ratio is (lighter + 0.05) divided by (darker + 0.05). WCAG 2.x asks for at least 4.5 : 1 for normal text and 3 : 1 for large text and icons at level AA, and 7 : 1 and 4.5 : 1 at level AAA. The suggestion keeps the hue and saturation and moves only the lightness, by the smallest step that reaches the goal.
Limitations
- This checks the WCAG 2.x ratio only. It is not a full accessibility audit and does not model the newer APCA method.
- A suggested color keeps the hue but may not match your brand palette. Check it by eye and with your own design rules.
- Passing the ratio does not guarantee that text is easy to read for everyone. Font weight, size and context also matter.
FAQ
What contrast ratio do I need for WCAG AA?
At least 4.5 : 1 for normal text and 3 : 1 for large text. Icons and input borders also need 3 : 1.
What is the difference between AA and AAA?
AAA is stricter: 7 : 1 for normal text and 4.5 : 1 for large text.
How is the closest passing color chosen?
The tool keeps the hue and saturation, moves the lightness lighter or darker in small steps and picks the smaller change that reaches the goal.
Can a near miss show as a pass?
The value is rounded to two decimals, but a ratio just under a pass mark is rounded down, so 4.499 shows as 4.49 and fails, as it should.
Are my colors sent anywhere?
No. Everything is calculated in your browser. A share link stores the two colors after the # sign, which is not sent to a server.
Related tools
- Dev
PX to REM Converter: Pixels, rem and em for Your Base Size
Convert px to rem and em, or rem and em back to px, for the root size you use. Get a table of common sizes you can copy into your CSS. Runs in your browser.
- Text
Compare Two Lists: Find What Is in One and Not the Other
Paste two lists and see the items only in A, only in B, in both, and all together, with counts and a copy button for each. Runs in your browser, nothing is uploaded.
- Text
Sort Lines Alphabetically, Naturally, by Number or by Length
Paste a list and sort the lines A to Z, by natural number order, by the number at the start, or by length. Remove repeats and blank lines, then copy the result. Runs in your browser.