Color Contrast Checker
Enter a foreground and background color to check the WCAG contrast ratio with AA and AAA pass/fail badges for normal and large text.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
How It Works
Pick a foreground and background color using the color swatches or type hex values directly. The tool computes the relative luminance of each color using the WCAG 2.1 formula — a weighted sum of the sRGB channels after gamma decoding — and divides the brighter luminance by the darker one (plus 0.05 in the numerator and denominator to avoid division by zero for pure black). The resulting contrast ratio runs from 1:1 (identical colors) to 21:1 (pure black on pure white). Four WCAG badges show pass or fail: AA for normal text (≥ 4.5:1), AA for large text (≥ 3:1), AAA for normal text (≥ 7:1), and AAA for large text (≥ 4.5:1). A live preview panel shows sample sentences in both normal and large text so you can visually verify the result. The calculation runs entirely in your browser with no server round-trip, and every change to either color updates the ratio and preview instantly.
Worked Example
Check #767676 grey text on a white background: the contrast ratio is exactly 4.54:1 — it passes WCAG AA for normal text (which requires 4.5:1) but fails AAA (7:1), and the pass/fail cards show each threshold separately, including the relaxed large-text rules. The logarithmic scale bar shows where the pair sits between 1:1 and the 21:1 of pure black on white. The APCA card previews the WCAG 3 metric, and the swap button instantly answers whether inverting foreground and background helps. The live preview renders real text so you can judge with your own eyes.
Use Cases
- Checking a brand color palette for accessibility compliance before shipping a website redesign
- Choosing button and link colors that remain legible against a dark or light theme
- Meeting WCAG 2.1 AA or AAA requirements for Section 508, EN 301 549, or ADA conformance
- Reviewing a mockup sent by a designer to flag unreadable text before development begins
- Teaching accessibility concepts by showing how small luminance differences cause large contrast failures
Frequently Asked Questions
- What is the difference between AA and AAA?
- WCAG defines two conformance levels. AA is the typical legal target: 4.5:1 for normal text, 3:1 for large text. AAA is enhanced: 7:1 normal, 4.5:1 large. Most public sites aim for AA.
- What counts as 'large text'?
- At least 18pt regular or 14pt bold (roughly 24px / 18.66px in browsers). Below that, the stricter 4.5:1 threshold applies.
- My contrast ratio is 4.49 — does that pass?
- No. The threshold is a strict ≥ 4.5:1 in WCAG. The tool rounds the displayed ratio to two decimal places but uses the full-precision value for the pass/fail check.
- Does this match WebAIM's checker?
- Yes — both use the same WCAG 2.1 luminance formula, so results are identical to the displayed precision.
- Are my colour values sent anywhere?
- No. The contrast ratio is computed locally in your browser from the colours you enter.