Content is loading…
Share
Check WCAG AA/AAA color contrast ratios for accessible web design.
The quick brown fox
Sample text at normal size
Large text (18px+)
Enter valid hex colors above (e.g. #1f2937)
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.
The WCAG Contrast Checker provides an instant, straightforward way to verify color combinations against official accessibility guidelines. By checking foreground and background pairs directly in the browser, designers and developers can quickly ensure their interfaces meet WCAG AA and AAA standards without needing external software.
Good to know: This tool focuses strictly on individual color pair ratios; projects requiring automated, site-wide accessibility scanning across multiple pages may need a comprehensive auditing suite.
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
Remove whitespace and comments to minify CSS code.
Upload an image and get all favicon sizes + HTML link tags.
Generate custom placeholder images with any size, color, and text.
Extract dominant colors from any image and export as HEX, RGB, HSL, CSS, or JSON.
Visually create CSS box shadows with live preview and one-click copy.
Design custom CSS border radius shapes with live preview.
Convert text or Markdown to a Word .docx file with live preview, RTL, and page-setup options.
Convert images to video with the Ken Burns zoom/pan effect. Add music and export as WebM.
Load and compare multiple URLs side by side in resizable iframes.
See your public IP address plus full location, ISP, ASN, timezone, coordinates, and more.
Convert Markdown to a fully customized, RTL-ready PDF.
Play local or online videos with HLS stream support, subtitles, playlist, and bookmarks.
Convert Markdown to a formatted Word .docx — live preview, RTL, tables, page setup, all client-side.
Generate speech from text using local AI models. Download as WAV. Runs entirely in your browser — private and free.