What contrast ratio do I need to pass WCAG AA?

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt / 14pt bold) and 3:1 for large text (18pt+ / 14pt+ bold). Level AAA requires 7:1 for normal text.

Is anything sent to a server?

No. All colour conversion and contrast calculations happen locally in your browser using JavaScript. Nothing is uploaded to any server.

What are the HSL values?

HSL stands for Hue (0–360°, the colour angle on the colour wheel), Saturation (0–100%, colour intensity), and Lightness (0–100%, from black to white). It is often more intuitive than RGB for adjusting brightness or saturation.

How is the contrast ratio calculated?

It uses the official WCAG formula: (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the lighter and darker colours' relative luminance. Luminance is computed by gamma-correcting each sRGB channel and weighting them 0.2126 red, 0.7152 green, 0.0722 blue. Ratios run from 1:1 (identical) to 21:1 (black on white).

What counts as large text for WCAG?

Large text is 18pt and up, or 14pt and up if bold (roughly 24px, or 19px bold). Large text only needs a 3:1 ratio for AA, versus 4.5:1 for normal text, because bigger glyphs are easier to read at lower contrast.

Does a 3-digit hex code like

Yes. Shorthand 3-digit hex is expanded by doubling each digit, so #f00 becomes #ff0000 (pure red) before conversion.

Can I convert HSL back to hex?

Yes. All three formats are linked — edit the HSL values and the hex and RGB outputs update in real time, and vice versa.

Color Converter + WCAG Contrast Checker

Colour converter and WCAG contrast checker

This tool converts a colour between hex, RGB, and HSL with all three formats kept in sync, and checks WCAG 2.1 contrast between any two colours. It’s for developers and designers picking CSS colours and confirming text remains readable for accessibility compliance under WCAG 2.1 and the EU European Accessibility Act.

How it works

Conversion is pure maths: hex is parsed to RGB (3-digit shorthand is expanded by doubling each digit), RGB maps to HSL via the standard max/min lightness formula, and edits in any format propagate to the others. For contrast, each colour’s relative luminance is computed by normalising the sRGB channels, gamma- correcting them (values at or below 0.03928 divided by 12.92, otherwise raised to the 2.4 power), and weighting them 0.2126·R + 0.7152·G + 0.0722·B. The ratio is (lighter + 0.05) / (darker + 0.05), then compared against the WCAG thresholds.

Example

The default blue #3b82f6 is rgb(59, 130, 246) and hsl(217, 91%, 60%). Against a white background its contrast ratio is about 3.7:1 — it passes AA for large text (needs 3:1) but fails AA for normal body text (needs 4.5:1), so you’d darken it for paragraph copy.

WCAG 2.1 thresholds

Level	Normal text	Large text (18pt+/14pt+ bold)
AA	4.5:1	3:1
AAA	7:1	4.5:1

All conversion and contrast maths run locally in your browser — nothing is uploaded.