Color Contrast Checker
Check WCAG color contrast ratios for accessibility compliance.
Sample Text
The quick brown fox jumps over the lazy dog
Contrast ratio
21:1
Normal text
Large text
Examples
| Input | Result |
|---|---|
| Foreground: #000000, Background: #FFFFFF | Contrast ratio: 21:1, AA normal: Pass, AAA normal: Pass, AA large: Pass, AAA large: Pass |
| Foreground: #777777, Background: #FFFFFF | Contrast ratio: 4.48:1, AA normal: Fail, AAA normal: Fail, AA large: Pass, AAA large: Fail |
| Foreground: #E8792D, Background: #FFFFFF | Contrast ratio: 3.31:1, AA normal: Fail, AAA normal: Fail, AA large: Pass, AAA large: Fail |
| Foreground: #1A1A1A, Background: #F5F5F5 | Contrast ratio: 17.4:1, AA normal: Pass, AAA normal: Pass, AA large: Pass, AAA large: Pass |
About this tool
The contrast checker calculates the WCAG contrast ratio between any foreground and background color pair. It tells you whether the combination passes AA and AAA standards for both normal and large text sizes. A live preview shows what your text will actually look like against the chosen background, and you can swap the foreground and background colors with one click.
WCAG (Web Content Accessibility Guidelines) contrast requirements exist to make sure text is readable for people with visual impairments. A ratio of 4.5:1 is the AA threshold for normal text, and 7:1 is the AAA threshold. Large text has lower requirements because bigger characters are easier to read. If your color combination fails, try darkening the foreground or lightening the background until you reach the target ratio.
Frequently asked questions
What contrast ratio is needed to pass WCAG AA?
Normal text needs a ratio of at least 4.5:1 for WCAG AA. Large text (18px bold or 24px regular and above) only needs 3:1 for AA.
What is the difference between WCAG AA and AAA?
AA is the minimum recommended level for most content. AAA is a stricter standard requiring 7:1 for normal text and 4.5:1 for large text. AAA is harder to achieve but provides better readability for users with low vision.
How is the contrast ratio calculated?
The tool calculates relative luminance for each color using the sRGB linearization formula, then applies the WCAG contrast ratio formula: (lighter luminance + 0.05) / (darker luminance + 0.05).