Color contrast is an important aspect of accessible design, particularly for text and other important data. Color contrast means the difference in brightness between two colors, in this case the text and the background. Contrast is described using a ratio, ranging from 1:1 (white on white) to 21:1 (black on white). For accessibility purposes, 4.5:1 is the minimum ratio that allows people with moderately low vision to tell the colors apart and see your content.
Color contrast checkers make it easy to determine the ratio for your colors:
- Color Contrast Analyzer for Chrome, is useful for analyzing on a pixel-by-pixel basis the contrast between any two colors on a Web page
- Contrast Analyser for Windows and Mac, useful for selecting colors with an eyedropper for analysis.
- WebAIM Contrast Checker compares two colors using a hexadecimal code, RGB values, or a color eyedropper and rates them against the WCAG standards (AA is the desired standard).
- Categories:
