Color Contrast Checker
Preview colors and check WCAG 2.2 contrast
—
Large text means at least 24 px regular or about 18.7 px bold. UI contrast is only an indication: real component boundaries and adjacent colors must be checked separately. Passing contrast alone does not guarantee accessibility.
Live preview
Large heading: an important message
Normal text: the quick brown fox jumps over the lazy dog.
Small text: captions and supporting details need enough contrast too.
Accessible foreground alternatives
Keep the background; adjust the text toward black or white for AA normal text (4.5:1). The closest available option is shown first.
About color contrast
Color contrast is the difference in perceived brightness between two colors. It affects how easily people can read text, especially on small screens, in bright light, or when they have low vision. A pleasing color pair is not necessarily a readable one.
The Web Content Accessibility Guidelines define minimum contrast targets for ordinary text, large text and meaningful interface graphics. Higher contrast can make reading more comfortable, but size, weight, spacing and surrounding colors also matter. Checking the colors in their real context remains important.
Designers commonly compare foreground and background colors while building buttons, labels and pages. Exploring lighter and darker alternatives helps preserve a palette while making text easier to distinguish. People may also use a contrast check when choosing presentation or document colors.
Color Palette Generator · Vector Paint · WCAG 2.2 contrast guidance