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.
WCAG 2.1 thresholds
| Level | Normal text | Large text (18pt+/14pt+ bold) |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Worked examples
Converting a blue: The colour #3b82f6 becomes rgb(59, 130, 246) and hsl(217, 91%, 60%). Against a white #ffffff background its contrast ratio is approximately 3.7:1 — it passes AA for large text (which needs 3:1) but fails AA for normal body text (which needs 4.5:1). To use it for body copy, darken it: hsl(217, 91%, 45%) is a deeper version that clears the 4.5:1 threshold.
Checking a dark theme: A white #ffffff on a near-black #1a1a2e background produces a contrast ratio of about 17:1, comfortably passing AAA for all text sizes.
A common mistake: A soft green like #6fcf97 on a white background only achieves about 2.7:1 — well below the AA minimum. It might look readable but fails accessibility checks, meaning it cannot be used for text in a compliant UI.
Understanding the three formats
Hex is the format CSS and design tools use most: a # followed by six hexadecimal digits for red, green, and blue. Three-digit shorthand (#f00) is supported and automatically expanded.
RGB expresses the same three channels as decimal numbers from 0 to 255. It is easier to reason about individual channels — increasing the red value, for example, warms a colour noticeably.
HSL separates hue (the colour angle on the wheel, 0–360°), saturation (colour intensity, 0–100%), and lightness (0% = black, 100% = white). HSL is the most intuitive format for making a colour lighter, darker, more vivid, or more muted without changing the underlying hue.
When to use this tool
- Choosing text colours: enter your background and proposed text colour and check the ratio before committing to a design.
- Dark-mode design: convert a brand colour from light-mode spec to an HSL representation and adjust lightness until it passes on the dark background.
- Design token audit: paste each token value to confirm it meets the required level for its use (body text needs AA; decorative elements can fall below).
- Format conversion: your design file uses hex but your CSS uses
hsl()— convert instantly.
All conversion and contrast maths run locally in your browser — nothing is uploaded.