WCAG Contrast Checker
Pick a text color and a background color, then check the contrast ratio against WCAG AA and AAA. Everything runs in your browser.
The quick brown fox jumps over the lazy dog. (Normal text, 16px)
The quick brown fox jumps over the lazy dog. (Large text, 24px bold)
About the WCAG Contrast Checker
The WCAG Contrast Checker measures the contrast ratio between a text color and a background color, then shows whether the pair meets WCAG 2.x accessibility levels. It is built for designers, WordPress and front-end developers, and anyone choosing readable color pairs for buttons, links, and body text. The ratio is calculated in your browser with the WCAG relative luminance formula, so your colors stay private and nothing is uploaded.
How it works
- Set the foreground (text) color and the background color using the native color picker or by typing a 6-digit hex value. The picker and the hex field stay in sync.
- Read the contrast ratio (for example 4.53:1) and the pass or fail badges for AA normal, AA large, AAA normal, and AAA large.
- Check the live preview, which shows sample text in your foreground color on your background color.
- Use the swap button to reverse the colors, or pick a preset pair to test a known combination.
Features
- Native color picker and hex input for both colors, kept in sync.
- Contrast ratio from the WCAG relative luminance formula, shown to two decimals.
- Pass or fail badges for AA normal (4.5:1), AA large (3:1), AAA normal (7:1), and AAA large (4.5:1).
- Live preview of normal and large sample text on the chosen background.
- Swap button and preset color pairs for fast comparison.
Frequently asked questions
How is the contrast ratio calculated?
Each color is converted to its WCAG relative luminance, which linearizes the red, green, and blue channels and weights them (0.2126 red, 0.7152 green, 0.0722 blue). The ratio is (lighter + 0.05) divided by (darker + 0.05), giving a value from 1:1 to 21:1.
What counts as large text?
WCAG defines large text as at least 18.66px bold or at least 24px regular (roughly 14pt bold or 18pt regular). Large text needs a lower ratio (3:1 for AA, 4.5:1 for AAA) because larger shapes are easier to read.
What is the difference between AA and AAA?
AA is the common compliance target and requires 4.5:1 for normal text and 3:1 for large text. AAA is stricter and requires 7:1 for normal text and 4.5:1 for large text. Aim for AA at minimum, AAA where you can.
Are my colors sent anywhere?
No. The ratio is computed in your browser using the WCAG formula. No colors are uploaded or logged.
Why do hex values turn uppercase?
The tool normalizes hex codes to uppercase so the picker, the hex field, and the preview always match. It accepts 3-digit shorthand from the picker and 6-digit hex you type, and updates once a valid value is entered.