Color Contrast Checker
Check WCAG 2.2 AA and AAA contrast between any foreground and background — live preview, pass/fail badges, and a suggested fix.
Foreground (text)
Background
Preview
Large text (18pt / 14pt bold)
Normal body text at 16px.
Small text at 14px — this must pass AA at 4.5:1.
WCAG 2.2 results
Contrast ratio
AA Normal: ≥ 4.5:1 · AAA Normal: ≥ 7:1 · AA Large (18pt+ / 14pt bold+): ≥ 3:1 · AAA Large: ≥ 4.5:1 · UI elements: ≥ 3:1
Common pairs
About this tool
A WCAG 2.2 contrast checker that calculates the relative-luminance ratio between a foreground and background color. Shows pass/fail badges for AA and AAA at normal text (4.5:1 / 7:1), large text (3:1 / 4.5:1), and non-text UI elements (3:1). Includes a live text preview and a one-click suggestion to fix failing pairs.
How to use it
Quick steps to get the most out of this utility.
- 1
Pick foreground and background
Use the color picker or type a hex value for each. The contrast ratio updates instantly.
- 2
Read the badges
Green ✓ means pass, red ✗ means fail — for AA, AAA, normal text, large text, and UI elements.
- 3
Preview in context
The preview section shows your actual colors as a paragraph, heading, and button so you can judge readability visually.
- 4
Fix failing pairs
If a pair fails AA, the "Suggested fix" card proposes a nearby foreground color that passes — click Apply to use it.
Why contrast matters
About 8% of men and 0.5% of women have some form of color vision deficiency, and a much larger share of users read content in poor lighting conditions, on aging screens, or with reduced-contrast displays. Low contrast text is the most common accessibility failure on the web, and it's entirely preventable.
In the EU, the European Accessibility Act (EAA) requires WCAG 2.1 Level AA compliance for most digital products sold to consumers. In the US, Section 508 mandates similar standards for federal agencies. Getting contrast right is not just good design — it is increasingly a legal requirement.
The luminance formula
WCAG uses relative luminance, which accounts for the non-linear way human eyes perceive brightness. Each RGB component is first linearised (removing the sRGB gamma curve), then combined with the perceptual weights 0.2126R + 0.7152G + 0.0722B. Green contributes most to perceived brightness; blue least. The final ratio is (L_light + 0.05) / (L_dark + 0.05).
Going beyond contrast
Contrast ratio is a useful proxy but not the whole picture. Color should never be the only way information is conveyed (WCAG 1.4.1). Links should be underlined, not just colored. Error states should use an icon or text label, not just red. Contrast checks are the first step — combine them with keyboard navigation testing, screen reader testing, and tools like axe DevTools for a complete audit.
Frequently asked questions
What is the WCAG contrast ratio?+
The contrast ratio is calculated using the relative luminance of the foreground and background colors, per the WCAG 2.x formula: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance and L2 the darker. The ratio ranges from 1:1 (no contrast, same color) to 21:1 (black on white).
What is the difference between AA and AAA?+
AA is the minimum accessibility standard required by most regulations (WCAG 2.1 Level AA). It requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA is the enhanced level requiring 7:1 for normal text — it is aspirational and not always practical for all content.
What counts as "large text"?+
WCAG defines large text as 18pt (24px) or larger, or 14pt (approximately 18.67px) or larger when bold. Large text has a more relaxed minimum ratio (3:1 for AA) because it is easier to read at lower contrast.
What about non-text UI elements?+
Buttons, icons, focus rings, and form borders need at least 3:1 against their adjacent background (WCAG 1.4.11 Non-Text Contrast). This applies to the visual presentation of the component, not text within it.
My brand colors fail AA — what should I do?+
Use the "Suggest a fix" feature — it nudges the foreground color toward a passing value while keeping it as close to the original as possible. Alternatively, consider using the brand color as an accent (buttons, highlights) against a neutral base, and use a dark/light text color that passes.
Keep exploring
More utilities and reading from Toolisk.