ToolFeather
Developer / SEORuns in your browser

Color Contrast Checker

Test whether your text and background colors meet WCAG accessibility contrast requirements.

Quick presets

Color Contrast Checker

Large heading 24pxBody text at 16px — the quick brown fox jumps over the lazy dog.Small print, 13pxButton
How it looks with colour-vision deficiency
Contrast ratio
–
–
Closest passing colours

Runs in your browser — nothing you enter is uploaded or stored.

ToolFeather · WCAG AA / AAA
Scratchpad auto-saved
Stored in this browser (localStorage)

About the Color Contrast Checker

Text is only useful if people can read it, and low contrast between text and its background excludes users with low vision — and anyone in bright sunlight. The Web Content Accessibility Guidelines (WCAG) define a measurable contrast ratio, from 1:1 (no contrast) to 21:1 (black on white), with thresholds for different conformance levels.

Enter a text color and a background color (via the swatches or hex fields) and this checker computes the exact ratio using the official relative-luminance formula, then shows pass/fail for each standard: AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1. A live preview shows your colors on real text so you can judge readability directly.

All calculation happens in your browser. Aim for at least AA on body text to keep your interface accessible and compliant.

Examples

Black on white → 21:1, passes every level.
Light grey on white → often fails AA; the tool flags it instantly.
Adjust the hex until "AA normal" shows PASS.

Frequently asked questions

4 answers
What counts as 'large text'?
WCAG defines large text as roughly 18pt (24px) normal weight, or 14pt (18.66px) bold. It has a lower contrast requirement than body text.
Which level should I target?
AA is the common legal and practical baseline. AAA is stricter and ideal where maximum readability matters.
How is the ratio calculated?
From the relative luminance of each color using the WCAG 2.1 formula — (lighter + 0.05) ÷ (darker + 0.05).
Does it consider transparency?
No — it compares two solid colors. Flatten any transparency to an effective color first.