🔲 Colour Contrast Checker

The Colour Contrast Checker computes the contrast ratio between a foreground colour (text) and a background colour, and tells you whether that ratio meets the WCAG 2.1 accessibility guidelines for readable text. Contrast is the single biggest determinant of whether text is readable for people with low vision, in bright sunlight, or on a cheap laptop screen — and it's the most commonly cited accessibility failure in automated site audits.

How to Use This Tool

Enter your foreground and background colours (hex format), and the tool computes the contrast ratio and shows the AA/AAA pass/fail for both normal text (14pt regular / 18pt bold and smaller) and large text (18pt regular / 14pt bold and larger). A live preview shows the actual pair of colours so you can visually confirm the numbers agree with your eye.

What This Tool Checks

The WCAG 2.1 luminance-based contrast ratio, on a scale from 1 (identical colours) to 21 (black on white). Thresholds: AA normal text 4.5:1, AA large text 3:1, AAA normal 7:1, AAA large 4.5:1.

Understanding Your Results

A ratio above 4.5:1 is safe for body text everywhere. Between 3.0 and 4.5 is only safe for large or bold text — using it for body copy is a WCAG failure. Below 3.0 is a fail for any text and should be reserved for decorative use where the specific colour doesn't carry meaning. AAA (7.0+) is the higher bar and is often required for government sites; it is also genuinely easier to read for people over 60, which is a large share of most consumer audiences.

How to Fix Common Problems

If a client-supplied brand colour fails contrast against white, don't compromise on accessibility — instead use the brand colour only for large headlines and buttons (where 3.0 is enough) and swap in a darker variant for body text. Tools that let you adjust HSL lightness while keeping hue constant are the fastest way to find a passing shade that still looks like the brand colour.

SEO Best Practices

Design at AA as the minimum bar and aim for AAA in body copy where the brand allows. Test every text/background combination that appears on the site, including link colours over the background and hover/focus states — not just the default body colour. Never use colour alone to convey meaning (e.g. red = error); pair it with an icon or label so colour-blind users get the same information.

Example

Black text (#000000) on white (#FFFFFF) is 21:1 — the maximum possible, and passes everything. #767676 gray on white is exactly 4.54:1 — barely passes AA normal text, fails AAA. #999999 on white is 2.85:1 — fails AA even for large text and should not be used for anything a user needs to read.

Common Mistakes to Avoid

Don't assume "looks fine on my monitor" is enough — designers usually work on colour-calibrated screens, but users don't. Don't use light gray text on white backgrounds for placeholder or "muted" text: it's a WCAG failure for a reason. Don't skip contrast checks on hover/focus states, disabled buttons, and error messages; those are often worse than the default palette.