HEX, RGB and HSL for any colour — plus the WCAG contrast ratio against a second colour, with the AA and AAA verdicts.
HEX is six hexadecimal digits — two each for red, green and blue, each from 00 to FF, meaning 0 to 255. #D4A373 is 212 red, 163 green, 115 blue. The three-digit shorthand #FA0 expands to #FFAA00 by doubling each digit.
RGB is the same information in decimal, written rgb(212, 163, 115). Identical data, easier to manipulate arithmetically.
HSL restructures it into hue, saturation and lightness — hue as an angle from 0 to 360 on the colour wheel, the other two as percentages. It is the notation to reach for when adjusting a colour rather than specifying one: making something lighter means changing one number instead of guessing at three.
WCAG contrast is computed from relative luminance, which weights the three channels by how sensitive human vision is to each:
L = 0.2126R + 0.7152G + 0.0722B
with each channel linearised first — divided by 12.92 below the threshold, and put through a 2.4 power curve above it. The contrast ratio is then (L₁ + 0.05) ÷ (L₂ + 0.05), lighter over darker, giving a range from 1:1 for identical colours to 21:1 for black on white.
The green coefficient of 0.7152 is the important one. Human vision is far more sensitive to green than to blue, so green contributes most of the perceived brightness and blue very little. This is why blue text on black can look reasonable and still fail badly, while yellow on white looks obviously wrong — yellow is red plus green, both heavily weighted.
The WCAG specification states the linearisation threshold as 0.03928. The technically correct sRGB value is 0.04045, and the published errata acknowledges this — the difference is negligible for 8-bit colour, and conformance checkers use the specified figure, so this calculator does too.
| Level | Normal text | Large text |
|---|---|---|
| AA (the usual legal standard) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
| UI components and graphics | 3:1 | |
"Large text" means 18pt and above, or 14pt and above if bold — roughly 24px and 18.66px in CSS. Logos and purely decorative text are exempt. AA is what most accessibility legislation references, including the European Accessibility Act and the standards applied under the ADA in the US.
Pure black on pure white is 21:1, the maximum possible. On a white background, #767676 is the lightest grey that still passes AA for body text at 4.54:1, and #595959 is the lightest that reaches AAA at 7:1. Anything lighter than #949494 fails even the 3:1 threshold for large text.
Those three greys are worth remembering. Placeholder text, captions and disabled states are where contrast failures cluster, and they are almost always a grey that looked fine on the designer's screen.
Passing 4.5:1 does not make a design accessible on its own. Colour must not be the only means of conveying information — a form field marked as invalid only by turning red is unusable for someone who cannot distinguish it, which is why the convention is to add an icon or text as well. Around 8% of men and 0.5% of women have some form of colour vision deficiency, most commonly red-green.
The ratio also says nothing about whether text is legible at its size, whether the font is readable, or whether the line length is comfortable. It is a floor, not a finish line.
At least 4.5:1 for body text and 3:1 for large text, which is WCAG level AA and what most accessibility legislation references. AAA asks for 7:1 and 4.5:1 respectively. Large text means 18pt or above, or 14pt bold — roughly 24px and 18.66px in CSS. Non-text elements such as icons, form borders and focus indicators need 3:1 against their surroundings.
Because human vision is far more sensitive to green than to red or blue. The coefficients — 0.2126 red, 0.7152 green, 0.0722 blue — reflect that sensitivity, so green contributes most of what we perceive as brightness. It explains why blue text on a dark background can look acceptable while failing badly, and why yellow on white looks obviously wrong: yellow combines the two most heavily weighted channels.
HEX and RGB carry identical information in different bases — #D4A373 is rgb(212, 163, 115), just hexadecimal rather than decimal. HSL restructures the same colour into hue as an angle, plus saturation and lightness as percentages. HSL is far easier to adjust with: making a colour lighter or less saturated means changing one number, where in HEX or RGB you would be guessing at three at once.
For body text, #767676 at 4.54:1 is the lightest that passes AA. For AAA, #595959 at 7.00:1. Anything lighter than #949494 fails even the 3:1 large-text threshold. These are worth memorising, because placeholder text, captions and disabled states are where contrast failures cluster — almost always a grey that looked fine on a bright screen in a dark room.
No, it is one requirement among many. Colour must never be the sole way information is conveyed — an error state shown only by turning a field red is unusable for someone with colour vision deficiency, which affects roughly 8% of men. Contrast also says nothing about text size, font legibility, line length, keyboard navigation or screen reader support. Treat it as a floor rather than a finish line.
Related: Aspect Ratio Calculator · Hex Calculator · Base64 Converter · URL Encoder