HEX, RGB and HSL Color Converter
Convert color codes and check the contrast ratio between two colors.
Large text is approximately 24px or more, or about 18.5px or more when bold. Check the actual font size and weight when evaluating conformance.
Common values
Contrast ratios for common color pairs
| Foreground | Background | Ratio | AA normal |
|---|---|---|---|
| #000000 | #FFFFFF | 21.00:1 | Pass |
| #333333 | #FFFFFF | 12.63:1 | Pass |
| #555555 | #FFFFFF | 7.46:1 | Pass |
| #767676 | #FFFFFF | 4.54:1 | Pass |
| #777777 | #FFFFFF | 4.48:1 | Fail |
| #FFFFFF | #0066CC | 5.57:1 | Pass |
| #000000 | #FFFF00 | 19.56:1 | Pass |
| #FFFFFF | #0000FF | 8.59:1 | Pass |
About this tool
Convert HEX colors to RGB and HSL, then calculate the contrast ratio between a foreground and background color. The result includes WCAG AA and AAA checks for normal and large text.
Enter colors as #RRGGBB or the shortened #RGB form. RGB components range from 0 to 255; HSL uses degrees and percentages.
Contrast is calculated from WCAG relative luminance. Threshold checks use the unrounded ratio.
AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
FAQ
- How is HEX converted to RGB?
- Split #RRGGBB into red, green, and blue pairs, then convert each hexadecimal pair to a decimal value from 0–255. For example, #FF8000 is RGB 255, 128, 0.
- What does a 4.5 to 1 contrast ratio mean?
- It is the WCAG AA threshold for normal text. This tool calculates relative luminance and marks AA normal text as passing at 4.5:1 or higher.
- Can #777777 text be used on white?
- Its ratio is about 4.48:1, just below the 4.5:1 AA threshold for normal text. #767676 is about 4.54:1, though actual text size and weight still matter.
- Can I enter the shortened #RGB form?
- Yes. Each digit is repeated, so #ABC is converted as #AABBCC.
Everything you enter is processed in your browser and never sent anywhere.