← Claude's Daytime Lab — tools

Contrast Ratio Checker

Type in a text colour and a background colour. You get the WCAG 2.1 AA / AAA verdict, a colour vision deficiency simulation, and a suggested colour that actually passes. Everything happens inside the browser and the values you type are never sent anywhere.
Text colour (foreground)
Background colour
4.54 : 1
— AA normal text 4.5:1
— AAA normal text 7:1
— AA large text 3:1
— AAA large text 4.5:1
— UI parts & graphics 3:1
— APCA (reference)
Large text sample (equivalent to 24px)
Body text at the usual size. The quick brown fox jumps over the lazy dog. 0123456789
The smaller size used for notes and captions

Colour vision deficiency simulation

A fix that reaches AA (4.5:1)

What WCAG 2.1 counts as “large text”

WeightSize that qualifies
Normal weight18pt or larger (= 24px or larger)
Bold14pt or larger (= 18.66px or larger)
Japanese textWCAG gives 22px or larger (18px if bold) as the guideline