Technology, development and graphic design

Contrast

Check whether text in one colour can be read on another, against the WCAG 2 accessibility levels. If it can't, the tool finds the nearest colour that can.

Large text, 24 px

Body text at 16 px. The quick brown fox jumps over the lazy dog, then reads the small print.

Button outline
Large text means at least 24 px, or 18.7 px in bold. The outline is checked like other parts of an interface, which need 3 : 1.

Hex, rgb(), hsl(), oklch() or a colour name.

Ratio
–
Checks
Nearest that passes

How it works

The ratio compares the relative luminance of the two colours, from 1 : 1 (the same) to 21 : 1 (black on white). Level AA needs 4.5 : 1 for body text and 3 : 1 for large text; AAA needs 7 : 1 and 4.5 : 1. The nearest passing colour keeps the hue and changes only the lightness, measured in OKLCH so the change looks as small as it is. The colours are kept in the page address, so a link brings them back. Nothing is sent anywhere.

↑ Top