Color Converter & Contrast Checker
Convert a color between HEX, RGB and HSL, then check whether a text and background pair meets the WCAG 2.x contrast thresholds.
Color converter
Contrast checker
Large text sample (18pt+)
Normal text sample: the quick brown fox jumps over the lazy dog.
The ratio is shown rounded down to two decimals so a near miss is never displayed as a pass.
Your input stays in your browser and is not sent to a server by this page.
What it is and when to use it
HEX, RGB and HSL are three ways to write the same color in CSS. HEX is compact, RGB is channel-based and HSL describes hue, saturation and lightness, which makes it easier to create lighter or darker variants. The contrast checker compares two colors using the WCAG ratio so you can see whether text is readable.
How to use
- Enter a color in the converter or use the picker.
- Copy the HEX, RGB or HSL value you need.
- In the contrast checker, set the text and background colors.
- Read the ratio and the pass or fail result for each WCAG level.
Example
#2563eb
rgb(37, 99, 235) and hsl(221, 83%, 53%)
Tips and common mistakes
- WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text (about 24px, or 18.66px bold) and for user interface parts such as input borders. AAA asks for 7:1 and 4.5:1.
- Check hover, focus, disabled and dark-mode colors too, not only the default state.
- Do not use color as the only signal. Pair red and green states with an icon or text label.
- A 3-digit HEX such as
#f80is shorthand for#ff8800. An 8-digit HEX adds an alpha (transparency) channel.
Frequently asked questions
Which formats are accepted?
HEX with 3 or 6 digits (the # is optional), rgb(r, g, b) with values 0 to 255, and hsl(h, s%, l%). Alpha values are not supported.
What are the WCAG thresholds?
WCAG 2.x asks for at least 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 and 4.5:1 at level AAA. Non-text UI components need 3:1.
Does a pass mean my design is accessible?
No. Contrast is only one part of accessibility. This tool checks color pairs, not a whole page.