Share
Check WCAG AA/AAA color contrast ratios for accessible web design.
Check color contrast ratios against WCAG 2.1 accessibility guidelines. Enter foreground and background colors to instantly see the contrast ratio and whether your color pair passes AA or AAA criteria for normal and large text. Essential for accessible web design.
Quickly verify if your color combinations meet web accessibility standards for AA and AAA compliance.
Enter your foreground color
Input the hex code or color value for your text or icon into the foreground field.
Enter your background color
Provide the hex code for the background element to calculate the specific contrast ratio between the two layers.
Review the calculated contrast ratio
The tool instantly displays the numerical ratio based on WCAG 2.1 formulas.
Check AA and AAA compliance
Verify if your color pair passes the accessibility requirements for both normal and large text sizes.
Adjust colors to meet standards
Modify your color selection if the results show a failure to ensure your design is accessible to all users.
Estimated time: PT1M
how to use design tools
Learn how to use design tools effectively to create stunning visuals. Master CSS generators, color palettes, and accessibility checkers with this expert guide.
WCAG Contrast Checker: Ensure AA & AAA Color Compliance
Ensure web accessibility with our WCAG Contrast Checker. Instantly calculate contrast ratios for normal and large text to meet AA and AAA design standards.
Share this tool
The quick brown fox
Sample text at normal size
Large text (18px+)
Enter valid hex colors above (e.g. #1f2937)
