Colour tools
5 tools that run in your browser. Nothing to install, nothing uploaded.
Colour tools for designers and developers: format conversion and WCAG contrast checking, computed exactly in your browser. The contrast checker matters most — it follows the WCAG formula precisely, including the sRGB linearisation that eyeballed tools skip, because a pass or fail near the threshold decides real accessibility compliance. It reports each WCAG level separately, since a ratio can pass AA and fail AAA, and calling that a single "pass" would mislead.
- Colour Blindness SimulatorSee a design through the four colour vision deficiencies — simulated in linear light.
- HEX / RGB / HSL / CMYK ConverterConvert a colour between HEX, RGB and HSL.
- Palette GeneratorHarmonies from one colour, each swatch carrying the contrast it can actually deliver.
- Colour PickerPick a colour, get every format, its tints and shades, and its real contrast.
- Contrast Checker (WCAG)Check colour contrast against WCAG AA and AAA — the exact ratio, not an estimate.
Contrast is a legal threshold, not a matter of taste
WCAG contrast ratios are the measurable part of accessibility law in a growing number of jurisdictions, and the arithmetic behind them is unforgiving of shortcuts. The formula requires converting each sRGB channel out of its gamma encoding before computing relative luminance — a step that eyeballed tools and naive implementations skip, producing ratios that are wrong by enough to flip a pass into a fail near the boundary. The checker here follows the specification exactly and reports each level separately, because a ratio can satisfy AA for body text and fail AAA, and collapsing that into one verdict hides the distinction that compliance turns on.
The thresholds worth memorising
Four numbers cover most decisions. Normal body text needs 4.5:1 for AA and 7:1 for AAA. Large text — 18pt, or 14pt bold — needs 3:1 for AA and 4.5:1 for AAA. User interface components and meaningful graphics need 3:1 against what sits next to them, which is the rule most often missed entirely: a button whose label passes but whose border disappears into the background still fails. Placeholder text, disabled states and low-contrast brand greys are the three places these thresholds are quietly abandoned in practice.
Why the same colour has several correct notations
HEX, RGB and HSL describe identical colours in different coordinate systems, and each is better at a different job. HEX is compact and is what design tools hand you. RGB maps directly to how a display mixes light and takes an alpha channel naturally. HSL separates hue from saturation and lightness, which is why it is the right space for generating a tint ramp or a harmony — you hold the hue and move the lightness, an operation that is fiddly in HEX and meaningless by eye. Conversion between them is lossless, so nothing is given up by working in whichever suits the task.
Frequently asked questions
Why does this contrast ratio differ from another checker?
Usually because the other tool skipped the sRGB linearisation step. The WCAG formula requires each channel to be converted out of its gamma encoding before relative luminance is computed, and implementations that work directly on the raw channel values produce ratios that are close but wrong — close enough to look right, wrong enough to flip a pass into a fail near the threshold. This one follows the specification, so the figure is the one an audit will produce.
What contrast ratio do I actually need?
For AA, which is what most legislation references: 4.5:1 for normal body text, and 3:1 for large text, meaning 18pt or 14pt bold. AAA raises those to 7:1 and 4.5:1. Separately, user interface components and meaningful graphics need 3:1 against adjacent colours — the rule most often missed, which is why a button with a legible label and an invisible border still fails.
Does converting between HEX, RGB and HSL lose anything?
No. They are different coordinate systems for the same 24-bit colour space, so conversion is exact and reversible. Each is better at a different job: HEX is compact and what design tools hand you, RGB maps to how displays mix light and carries alpha naturally, and HSL separates hue from lightness, which is what makes it the right space for building a tint ramp or a colour harmony.