Color Contrast Checker
A contrast checker tests foreground and background color pairs against WCAG accessibility standards, reporting the contrast ratio and which compliance level the combination passes. Designers use it during mock reviews, developers when implementing color tokens, and accessibility auditors when certifying sites against WCAG 2.1 or 2.2. The tool catches low-contrast combinations that look fine on a calibrated monitor but fail for users with visual impairments. It is the difference between a design that merely looks good and one that everyone can actually read. The checker parses your foreground and background colors, converts each to relative luminance using the sRGB-to-linear formula specified by WCAG, then computes the contrast ratio as the lighter luminance plus 0.05 divided by the darker luminance plus 0.05. The ratio is compared against WCAG AA thresholds of 4.5:1 for normal text and 3:1 for large text, and AAA thresholds of 7:1 and 4.5:1 respectively. The tool flags failures clearly so you know exactly which combinations need rework. Optional simulation modes preview how the pair looks to users with common color vision deficiencies. Common use cases: Auditing design mockups for WCAG AA compliance before handoff. Validating color tokens in a design system. Checking text-on-image combinations for readability. Tuning dark mode palettes for accessibility. Preparing accessibility documentation for client sign-off. Tips for best results: Aim for AA at minimum, since AA is the legal baseline in many jurisdictions. Large text has lower thresholds, so design headings and body text separately. Watch for text on images because average contrast can pass while worst-case areas fail. Re-check contrast whenever the brand palette changes since small hue shifts can push a pair below threshold. Frequently asked questions about the color contrast checker: What is a contrast checker? It checks the contrast ratio between two colors to determine if they meet WCAG accessibility standards (AA and AAA). What contrast ratios are required for accessibility? WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. The Color Contrast Checker is part of the utilities category and runs on any device with a modern browser — desktop, tablet, or phone. Everything is processed locally in the tab, so results are instant and the input is never uploaded, which also makes it safe for work and school use. Related tools: BMI & Health Calculator, Date Calculator, Image Color Extractor. Read the step-by-step Color Contrast Checker guide or browse more utilities.