Either enter a background and foreground color in RGB, hexadecimal format, or pick a color using the color picker.
Once a color has been selected the lightness level can be adjusted.
| Aa normal text | Aa large text | components | |
|---|---|---|---|
| WCAG AA | |||
| WCAG AAA |
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
Foreground color picker
Background color picker
WCAG 2.0 AA Standard
WCAG 2.0 Level AA requires the visual presentation of text and images of text to have a contrast ratio of at least 4.5:1, except for large text, which should have a minimum contrast ratio of 3:1.
WCAG 2.0 AAA Standard
The WCAG 2.0 Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text (14 point and bold or larger or 18 point or larger).
- People with low vision often have difficulty reading text that does not contrast with its background.
- Providing a minimum luminance contrast ratio between the text and its background can make the text more readable for users who cannot see the full range of colors and also helps those rare site visitors who see no color.
- Incidental text such as images that are purely decorative or part of an inactive site visitor interface component, and Logotypes, such as parts of a logo or brand name, have no minimum contrast requirement.
