Color Converter & Contrast Checker
Convert colors between HEX, RGB, HSL and HSV, and check text contrast against the WCAG accessibility guidelines.
sRGB conversions; WCAG 2.2 contrast ratio ยท By Stuart Mathieson · Updated October 2026
Contrast checker
The color above is used as the text color.
Large text sample
Normal text sample - the quick brown fox jumps over the lazy dog.
Contrast ratio
| WCAG 2.2 check | Needs | Result |
|---|---|---|
| AA - normal text | 4.5:1 | |
| AA - large text | 3:1 | |
| AAA - normal text | 7:1 | |
| AAA - large text | 4.5:1 | |
| AA - icons and UI parts | 3:1 |
This color against white: · against black:
Everything runs in your browser - nothing you enter is sent to a server.
Color formats explained
Screens mix red, green and blue light. HEX, RGB, HSL and HSV are different ways of writing the same sRGB color - the standard color space of the web:
- HEX
- -
#2563eb- red, green and blue as two hexadecimal digits each (00 to ff). The short form#fa0means#ffaa00. - RGB
- -
rgb(37, 99, 235)- the same three channels as numbers from 0 to 255. - HSL
- -
hsl(221, 83%, 53%)- hue (an angle on the color wheel: 0 red, 120 green, 240 blue), saturation and lightness. Handy for making a color lighter or darker while keeping its hue. - HSV
- - Hue, saturation and value (also called HSB). Used by the color pickers in many design apps; not a CSS format.
Converting HEX and RGB is exact. HSL and HSV values are rounded to whole numbers, so converting back can shift a channel by one step. You can type any CSS color, including names like rebeccapurple.
Contrast and accessibility
Text needs enough contrast with its background to be readable, especially for people with low vision or color blindness, and for anyone reading a phone in sunlight. The Web Content Accessibility Guidelines (WCAG) measure contrast as a ratio from 1:1 (no contrast) to 21:1 (black on white):
L is the relative luminance of each color - how bright it looks - worked out from the red, green and blue channels after undoing the sRGB gamma curve, with green weighted most because our eyes are most sensitive to it:
What the levels mean
| Level | Normal text | Large text |
|---|---|---|
| AA (the usual legal and industry target) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
Large text means at least 18 point (24 CSS pixels), or 14 point (about 18.7 CSS pixels) in bold. Icons, form field borders and other parts of the interface you need to see need 3:1 (WCAG success criterion 1.4.11). Ratios aren't rounded up: 4.49:1 fails AA.
Examples on white
#767676gray is 4.54:1 - the lightest gray that passes AA for normal text.#777777is 4.48:1 and just fails.#2563ebblue is 5.17:1 - passes AA, but not AAA.#1e40afdark blue is 8.72:1 - passes AAA.
Frequently asked questions
How do I convert HEX to RGB?
Split the six digits into three pairs and convert each from hexadecimal to decimal. #2563eb is 25, 63 and eb, which are 37, 99 and 235 - so rgb(37, 99, 235).
What contrast ratio do I need for accessible text?
WCAG level AA needs at least 4.5:1 for normal text and 3:1 for large text. Level AAA needs 7:1 and 4.5:1.
What counts as large text in WCAG?
Text at least 18 point (24 CSS pixels), or at least 14 point (about 18.7 CSS pixels) if it is bold.
Why does the result show 4.49:1 rather than 4.5:1?
Ratios are cut off rather than rounded, so a color that falls just short of a threshold isn't shown as passing. WCAG treats the thresholds as exact minimums.
Sources
- Understanding Success Criterion 1.4.3: Contrast (Minimum) - W3C Web Accessibility Initiative
- Understanding Success Criterion 1.4.6: Contrast (Enhanced) - W3C Web Accessibility Initiative
- Understanding Success Criterion 1.4.11: Non-text Contrast - W3C Web Accessibility Initiative
- CSS Color Module Level 4 - W3C