Use this free online Color Contrast Checker to instantly measure the contrast ratio between foreground and background colors. Simply choose or enter your text and background colors to see the calculated contrast ratio, WCAG accessibility compliance results, and a live preview showing how your color combination appears across headings, body text, buttons, and form elements.
This tool helps designers, developers, and content creators create color combinations that are readable, visually appealing, and accessible to everyone.
Contrast Ratio
WCAG Compliance Results
Accessibility Preview
Use this section to see how your chosen color combination affects headings, body text, form controls, and buttons.
Key Features Of This Tool
- Instantly calculates the contrast ratio between your selected foreground and background colors.
- Displays a clear accessibility rating, including whether the color combination is Excellent, Good, Fair, or Poor.
- Checks compliance with WCAG standards for normal text, large text, and non-text elements, including both AA and AAA requirements.
- Provides a live accessibility preview so you can see how your chosen colors appear on headings, body text, buttons, and form controls.
- Includes a grayscale preview to help evaluate how your color combination appears without color.
- Select colors easily using the built-in color pickers or by entering color values manually.
- Copy generated color values with a single click for quick use in your projects.