How to use Color Contrast Checker
- Choose a text color and a background color.
- Read the contrast ratio.
- Check which WCAG levels pass for normal and large text.
About this tool
The Web Content Accessibility Guidelines (WCAG) require a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 and 4.5:1 for the stricter AAA level. Large text means 18 pt (24 px) or 14 pt (about 18.7 px) bold and above.
The ratio is computed from the relative luminance of both colors, as defined by WCAG 2.
Frequently Asked Questions
- What contrast do I need?
- At least 4.5:1 for body text to meet WCAG AA.
- Do logos need contrast?
- Logos and decorative elements are exempt, but UI components and graphics that convey information need 3:1.
Related tools
- Color PickerChoose a color and copy its code in every common format.
- Color Palette GeneratorBuild a harmonious palette starting from a single color.
- Color WheelSee where your color sits on the wheel and how its harmonies relate.
- Shades and Tints GeneratorCreate a scale of lighter and darker versions of one color.
- Random Color GeneratorPress Generate to see a fresh set of random colors.
- CSS Gradient GalleryPick a ready-made gradient and copy its CSS.