Colour and contrast lab

Pick two colours, check they pass accessibility rules, and see them through different eyes.

WhatsApp me

I reply the same working day, in UK hours.

Or call 07935 996850 or book a call

5.0 from 31 Google reviews (checked Nov 2026)

Lab 09 of 09

Accessibility (WCAG)
OKLCH colour
Inclusive design

Try it

Lab 09 of 09

Pick two colours

Text colour

Background

Or try an example pair

Contrast ratio6.56:1Passes AA for all text. AAA for large text only.

Normal textBody text: under 24px, or under about 18.7px if boldAA 4.5:1 PassAAA 7:1 Fail
Large textHeadings: 24px and up, or about 18.7px and up if boldAA 3:1 PassAAA 4.5:1 Pass
UI parts and graphicsField and button outlines, icons, chart linesAA 3:1 Pass

See it on a website, through different eyes

Example: a made-up bakery, drawn in only your two colours. Switch the view to simulate how it looks with each type of colour blindness.

Typical. Colours as you picked them.

A simulation, not a perfect picture of anyone's sight. It uses the Machado, Oliveira and Fernandes (2009) model at full strength.

Fix it for me

Pick which colour can move. The lab nudges its lightness to the nearest shade that passes and keeps its hue, so the brand still looks like the brand.

Change

Aim for

Text colour lightness, same hue (OKLCH). Drag it, or use the arrow keys.

Before

#2447edL 50%6.56:1 Pass

Already passes AA at 6.56:1. Nothing to fix.

The maths, checked on the W3C's WCAG 2.2 text on 5 November 2026: relative luminance L = 0.2126 R + 0.7152 G + 0.0722 B (each channel linearised, with the 0.04045 threshold), contrast ratio (L1 + 0.05) / (L2 + 0.05). Text needs 4.5:1 for AA and 7:1 for AAA; large text 3:1 and 4.5:1; UI parts and graphics 3:1. Ratios are cut, never rounded up, so 4.499:1 fails, as the W3C says.