Color Contrast Checker
Large sample text
This is normal body text used to preview the contrast between your two colors.
Contrast Ratio
18.88:1
WCAG AA — Normal text
Minimum 4.5:1
WCAG AA — Large text
Minimum 3:1
WCAG AAA — Normal text
Minimum 7:1
WCAG AAA — Large text
Minimum 4.5:1
WCAG 2.1 — UI components & graphics
Minimum 3:1
How to Use
Pick or type a hex code for both the foreground (text) and background colors. The contrast ratio updates instantly, and each WCAG criterion shows whether the combination passes or fails. Use the "Swap colors" button to reverse the pair. A live preview of large and normal text lets you see the visual result before committing to the colors.
What Is Contrast Ratio
Contrast ratio is a number between 1:1 (no contrast) and 21:1 (maximum — pure black on pure white) defined by WCAG (Web Content Accessibility Guidelines). It is calculated from the relative luminance of the two colors, then expressed as (lighter + 0.05) / (darker + 0.05). Higher ratios are easier to read, especially for users with low vision or in bright environments.
WCAG Thresholds
WCAG 2.1 defines minimum contrast ratios by text size and conformance level. AA is the standard most sites target; AAA is stricter and often required for government or medical sites. Normal text is below 18pt (or 14pt bold); large text is 18pt+ (or 14pt bold+). AA Normal requires 4.5:1, AA Large requires 3:1. AAA Normal requires 7:1, AAA Large requires 4.5:1. WCAG 2.1 additionally requires 3:1 for UI components, icons, and graphical elements that convey meaning.
Common Use Cases
- Designers verifying accessible color pairs before committing to a palette.
- Developers checking contrast for buttons, links, and form fields during implementation.
- Content editors verifying that pull quotes, callouts, and decorative text remain legible.
- Accessibility auditors producing WCAG conformance reports.
- Product managers confirming design-system tokens meet AA or AAA requirements.
Tips
- If AA Normal fails, darken the text or lighten the background until the ratio reaches 4.5:1.
- Pure black (#000) on pure white (#fff) gives the maximum ratio of 21:1.
- Decorative text (logos, incidental text) is exempt from WCAG contrast rules, but intentional content is not.
- Icons that convey information count as "UI components" and need 3:1 contrast against their adjacent background.
- Both 3-digit (#fa0) and 6-digit (#ffaa00) hex formats are accepted.
Privacy
All contrast calculations happen in your browser. Your color values are never sent to any server or stored anywhere.
FAQ
What is the difference between AA and AAA?
AA is the standard conformance level most sites target, requiring 4.5:1 for normal text and 3:1 for large text. AAA is stricter — 7:1 for normal text and 4.5:1 for large text — and is often required for government or medical sites.
Are the color values I enter sent anywhere?
No. All contrast-ratio calculations happen entirely in your browser, and your color values are never sent to a server or stored anywhere. You can safely test unreleased brand colors.
Where is the boundary between normal and large text?
Normal text is below 18pt (or 14pt bold); large text is 18pt or larger (or 14pt bold and up). Large text has lower requirements — 3:1 for AA and 4.5:1 for AAA.
Which color code formats are supported?
Both 3-digit (#fa0) and 6-digit (#ffaa00) hex formats are accepted. If you enter an invalid value, the tool shows "Invalid hex color" and does not compute a ratio.
Do contrast rules also apply to icons and shapes?
Yes. UI components, icons, and graphical elements that convey meaning require at least 3:1 contrast against their adjacent background under WCAG 2.1. This tool also reports pass/fail for that UI-component threshold.