Color contrast checker
Pick a text color and a background color to check them against WCAG accessibility rules.
What the levels mean
AA is the level most accessibility laws and policies point to. AAA is stricter and is a good target for long passages of body text. "Large text" means at least 18pt (24px), or 14pt (about 19px) bold.
Questions
- What contrast ratio do I need?
- WCAG 2 level AA asks for at least 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold). Level AAA asks for 7:1 and 4.5:1.
- How is the contrast ratio calculated?
- Each color gets a relative luminance from 0 (black) to 1 (white), based on its linear RGB values. The ratio is (lighter + 0.05) ÷ (darker + 0.05), from 1:1 (no contrast) to 21:1 (black on white).
- Does contrast matter for buttons and icons?
- Yes. WCAG 2.1 asks for 3:1 between interface parts like buttons, form borders and icons and the colors around them.
More color tools
- Color pickerPick any color and get its HEX, RGB, HSL and CMYK codes
- Hex to RGB converterTurn a hex code into RGB values
- RGB to hex converterTurn red, green and blue values into a hex code
- Hex to HSL converterHue, saturation and lightness from a hex code
- Hex to CMYK converterPrint-ready CMYK percentages from a hex code
- Color mixerBlend two colors and see every step in between
- Image color pickerUpload a photo and pick colors from it
- CSS gradient generatorBuild a linear or radial gradient and copy the CSS