Color Converter
Convert between HEX, RGB and HSL, and check whether a text and background pair clears the WCAG contrast requirement.
- HEX
- #3366cc
- RGB
- rgb(51, 102, 204)
- HSL
- hsl(220, 60%, 50%)
Contrast check
Contrast ratio 5.37 : 1 — clears AA for body text, clears AA for large text
How to use
Type a color value and the other notations are worked out for you. The hash on a HEX code is optional, and the three-digit shorthand is understood too.
A swatch sits next to the value, so you never have to guess what #3366cc actually looks like. Useful when you are moving colors out of a design file and into code.
The contrast check takes a text color and a background color and computes the ratio between them. WCAG asks for 4.5:1 on body text and 3:1 on large text. Below that, readers with low vision start losing the words on the page.
Nothing you enter is sent to a server. It is all calculated inside your browser.