Color Converter guide

Colour formats

Screens mix red, green and blue light, and most colour formats on the web are different ways of writing the same sRGB values. HEX and rgb() give the channel values directly, HSL describes hue, saturation and lightness, and OKLCH describes colours in a space designed so that equal changes look like equal changes to the eye. The XGM converter shows all of them for one colour.

How to use the Color Converter

1. Open the Color Converter and enter a colour as HEX, rgb() or hsl().
2. Copy the format you need from the table of colour formats.
3. Enter a background colour to check contrast; use Swap colours to test the reverse.
4. Read the contrast ratio and the AA and AAA results for normal and large text, with a preview.

Test the real pairs your design uses: body text on the page background, link colour on the background, button text on the button colour and hint text in inputs. Each pair has its own ratio.

WCAG contrast requirements

The Web Content Accessibility Guidelines (WCAG) define contrast as a ratio between the relative luminance of two colours, from 1:1 (identical) to 21:1 (black on white). Low contrast makes text hard to read for people with low vision, colour vision deficiencies, or anyone using a phone in sunlight.

Large text means at least 18 point (24 CSS pixels) regular, or 14 point (about 18.66 CSS pixels) bold. The preview shows a 24 px sample so you can judge the large-text case visually as well as by the number.

Why OKLCH is useful

In HSL, colours with the same lightness value can look very different in brightness: a yellow at 50% lightness looks much lighter than a blue at 50%. OKLCH's lightness is designed to match perception, so changing only the hue keeps the apparent brightness close to the same. That makes it easier to build colour palettes and to predict contrast.

:root {
  --brand: oklch(0.52 0.17 262);
  --brand-hover: oklch(0.46 0.17 262);
  --success: oklch(0.52 0.12 150);
  --danger: oklch(0.52 0.18 27);
}

Modern browsers support oklch() in CSS. OKLCH can also describe colours outside the sRGB gamut that wide-gamut displays can show; the converter works with sRGB colours, so its OKLCH values stay within what every screen can display.

Fixing a failing colour pair

When a pair fails, change lightness first and keep the hue. Darkening a text colour or lightening a background by small steps usually reaches 4.5:1 without changing the character of the design. In OKLCH this is especially predictable: lower the first value (lightness) and check again.

Keep a lighter tint for decorative uses such as backgrounds of badges and illustrations, and a darker shade of the same hue for text and icons. Design systems often define both as separate tokens so nobody accidentally uses the light tint for text.

Dark themes need their own checks rather than inverted values. Pure white text on pure black reaches 21:1 but can feel harsh; a slightly softer text colour on a dark grey surface still passes AAA comfortably and is easier on the eyes.

Practical tips for accessible colour

• Check both light and dark themes; a colour that passes on white often fails on a dark surface.
• Do not rely on colour alone to convey meaning; add text or icons to errors and status badges.
• Keep link colour distinguishable from body text by more than hue, for example with an underline.
• Test focus indicators against both the component and the page background.
• Define colours as design tokens so contrast fixes happen in one place.

Contrast is one part of accessibility. For a page such as https://www.example.com, automated checkers catch many contrast issues, but real pairs in hover states, disabled controls and overlays need manual checks with a tool like this one.

FAQ

Sources

• W3C: Web Content Accessibility Guidelines (WCAG) 2.2
• W3C: Understanding Success Criterion 1.4.3 Contrast (Minimum)
• W3C: CSS Color Module Level 4
• MDN: oklch()