NiftyKit

Colour Converter and Contrast Checker

Convert HEX, RGB, HSL and OKLCH colours and check WCAG contrast.

By Updated

Runs in your browser. Your input is not uploaded.

Enter HEX, rgb(), hsl(), hwb(), oklch(), oklab() or a CSS colour name such as rebeccapurple.

Large text sample

Normal body text sample. The quick brown fox jumps over the lazy dog.

Icon and border

Contrast ratio —

  • —AA Normal text (needs 4.5:1, SC 1.4.3)
  • —AA Large text (needs 3:1, SC 1.4.3)
  • —AAA Normal text (needs 7:1, SC 1.4.6)
  • —AAA Large text (needs 4.5:1, SC 1.4.6)
  • —AA Icons, borders and form controls (needs 3:1, SC 1.4.11)

Text colour values

Background colour values

How to use it

  1. Enter a text colour and a background colour in any CSS format, or pick them with the colour pickers.
  2. Read the contrast ratio and the WCAG 2.2 results. Each check says Pass or Fail.
  3. If normal text fails, use the suggested colour: the closest shade of your text colour that passes AA.
  4. Copy any colour in HEX, RGB, HSL, HWB or OKLCH from the tables.

Colour formats

FormatExampleNotes
HEX#5038d4The most common format in design tools and CSS. 8 digits include alpha.
RGBrgb(80, 56, 212)Red, green and blue from 0 to 255.
HSLhsl(249.2, 64.5%, 52.5%)Hue, saturation and lightness. Easy to adjust by hand.
HWBhwb(249.2 22% 16.9%)Hue plus how much white and black to mix in.
OKLCHoklch(47.6% 0.224 280.7)Perceptual lightness, chroma and hue. Best for palettes.

How contrast is calculated

The contrast ratio compares the relative luminance (perceived brightness) of the two colours, using the formula in WCAG 2.2. It ranges from 1:1 (identical colours) to 21:1 (black on white). Ratios are rounded down, never up, so a colour shown as passing really does pass.

If the text colour is semi-transparent, it is blended with the background first. A semi-transparent background is assumed to sit on a white page.

Limitations

  • Contrast follows WCAG 2.2. The proposed APCA method in the WCAG 3 drafts can give different results, especially for light text on dark backgrounds.
  • OKLCH colours outside the sRGB range that screens can show are adjusted the way CSS does it: lightness and hue are kept, and the colour is made less saturated until it fits.
  • CMYK is not offered, because converting screen colours to print accurately needs the printer’s colour profile.

Frequently asked questions

What contrast ratio do I need?

For WCAG 2.2 level AA, which most accessibility laws and policies require, normal text needs at least 4.5:1 and large text at least 3:1. Icons, input borders and other essential graphics need 3:1 against what is next to them. Level AAA raises text to 7:1 and 4.5:1.

What counts as large text?

WCAG defines large text as at least 18 point (24 CSS pixels) for regular weight, or 14 point (about 18.7 CSS pixels) for bold. Most body text is smaller than this, so use the normal text threshold unless you are checking headings.

Why do the HSL values have decimals?

Whole-number HSL can only describe some colours exactly. When rounding to whole numbers would turn your colour into a slightly different one, the converter shows one decimal place so that copying the value gives you exactly the same colour.

What is OKLCH and why use it?

OKLCH describes colours by lightness, chroma (colourfulness) and hue, in a way that matches how people perceive them. Unlike HSL, two OKLCH colours with the same lightness really look equally light, which makes it easier to build consistent palettes and accessible colour scales. All modern browsers support oklch() in CSS.