Color Contrast Checker
Short answer
Check text-to-background color contrast ratios against WCAG AA/AAA standards.
Borderline contrast — check large-text use.
The quick brown fox jumps
The quick brown fox jumps
How to improve
WCAG level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). Aim for 7:1 (AAA) where you can — it keeps text readable for low-vision users and in bright sunlight.
What It Does
Computes the WCAG contrast ratio between any foreground and background color you enter, using the same relative-luminance formula as the WCAG spec, and checks it against the AA and AAA thresholds for normal and large text (4.5:1 / 3:1 for AA, 7:1 / 4.5:1 for AAA). Shows a live text preview in your colors alongside a pass/fail badge for each threshold.
Why It Matters
Low-contrast text is the most common automatically detected accessibility failure on home pages in WebAIM's yearly Million report, and it is one of the easiest to fix with a color change. WCAG 2.1 success criterion 1.4.3 sets the minimum ratios, and EN 301 549 — the standard behind the European Accessibility Act — applies them to web content.
How It Works
-
Enter or pick a foreground (text) color and a background color
-
We calculate the WCAG relative-luminance contrast ratio between the two colors
-
Check the ratio against the AA and AAA thresholds for normal and large text
-
See a live preview of your text on your background plus a pass or fail badge for each threshold
Sample input + output
foreground: #767676 background: #ffffff
contrast ratio: 4.54:1 AA normal text (4.5:1) PASS AA large text (3:1) PASS AAA normal text (7:1) FAIL AAA large text (4.5:1) PASS
Who Uses This
-
Designer
Validate brand color palette against WCAG before locking it in. Many "modern" pastels fail 4.5:1 against white — better to discover before applying brand-wide.
-
Accessibility Auditor
Check each text and background color pair against AA and AAA thresholds before signing off a client's EAA Annex V declaration.
-
Frontend Developer
Catch contrast regressions introduced by CSS-variable theme changes before they reach production.
Frequently Asked Questions
What WCAG ratio do I need?
4.5:1 for normal text, 3:1 for large text (≥18pt or ≥14pt bold) and UI components. WCAG 2.1 AAA requires 7:1 — a higher bar most brands don't target.
Does this check images and icons?
Text contrast only, and only for the two colors you enter here. Image contrast (e.g. text-on-image hero banners) needs manual review — there is no automatic page scan.
What contrast does the EAA require?
For web content, EN 301 549 v3.2.1 applies WCAG 2.1 Level AA, including 1.4.3 — so text needs at least 4.5:1 against its background (3:1 for large text). Check every pair your site uses.