WCAG Color Contrast Checker
This accessibility testing tool checks your foreground and background color contrast ratios against WCAG 2.1 AA and AAA standards (SC 1.4.3).
Paste your foreground and background colors below to check their WCAG compliance to see the WCAG results at different font sizes. Use the copy results link button to share the results with developers on your team or use the generate bug report option for quickly logging accessibility defects.
Color Contrast Preview
Normal text — The quick brown fox jumps over the lazy dog.
Large text — The quick brown fox.
Colorblindness Simulation
Approximate rendering for four common types of color vision deficiency.
WCAG Compliance
Bug Report
Markdown ready to paste into Jira, Linear, GitHub Issues, or ADO.
What Do These Levels Mean?
AA is the standard minimum for most accessibility requirements and legal compliance. Normal text requires a 4.5:1 ratio; large text requires 3:1.
AAA is the enhanced level representing the highest accessibility standard. Normal text requires 7:1; large text requires 4.5:1. AAA is the gold standard but not always achievable for all color combinations.
Large text is defined by WCAG as 18pt (24px) or larger, or 14pt bold (approximately 18.67px bold) or larger.
Non-text elements (WCAG 1.4.11) — borders, icons, and UI component boundaries such as input fields, checkboxes, and buttons require a minimum 3:1 contrast ratio against their adjacent background. Use the AA Large Text result above when checking non-text elements.
Relative luminance is a measure of how much light a color appears to emit, on a scale from 0 (pure black) to 1 (pure white). It is not a simple average of RGB values — the formula applies a gamma correction curve and weights the channels to match human perception: green contributes the most (~72%), red moderately (~21%), and blue very little (~7%). This is why two colors that look equally bright to casual observation can have very different luminance values, and why changing hue alone rarely fixes a contrast failure.
Contrast ratio is calculated from the two luminance values as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 the darker. The 0.05 offset prevents division by zero for pure black and models how the eye adapts to ambient light. The luminance delta (Δ) shown in the bug report is the absolute difference between the two luminance values — the closer to 0, the less inherent contrast between the colors regardless of how different they may appear in hue.