What does WCAG contrast mean?
WCAG contrast compares the relative luminance of text and background colors to help determine whether text is readable enough for accessibility.
Color
WCAG Contrast Checker
Check color contrast against WCAG AA and AAA guidelines. Test foreground and background colors for normal text, large text and UI readability.
Tool
WCAG Contrast Checker
Check color contrast against WCAG AA and AAA guidelines. Test foreground and background colors for normal text, large text and UI readability.
This tool runs in your browser. Your input is processed locally and is not uploaded.
About this Tool
Use this free WCAG contrast checker to test whether your foreground and background colors meet common accessibility contrast targets. Enter text and background colors to calculate the contrast ratio and check AA and AAA results for normal and large text.
Examples
- #111827 on #ffffff
- #ffffff on #2563eb
- #1f2937 on #f9fafb
- #facc15 on #111827
Frequently Asked Questions
What is the difference between AA and AAA?
AA is the common accessibility target for many websites and apps. AAA is stricter and requires higher contrast.
Does large text need the same contrast as normal text?
No, large text has a lower contrast requirement because it is generally easier to read than smaller text.
Can this tool guarantee full accessibility?
No, contrast is only one part of accessibility. Font size, spacing, layout, focus states and usability also matter.