What is the difference between AA and AAA accessibility?

AA is the standard minimum requirement (4.5:1 ratio for normal text), while AAA is the strictest level (7:1 ratio for normal text) for maximum readability.

What counts as 'Large Text'?

Large text is generally considered to be 18pt (24px) or larger, or 14pt (18.5px) if the font is bold.

Color Contrast Checker — WCAG AA/AAA | Effect Control - Free Online Tool

The Ultimate Guide to the Color Contrast Checker

The Color Contrast Checker is an essential accessibility tool designed to help you verify that your text is readable against its background. By calculating the exact contrast ratio between your foreground and background colors, this tool ensures your designs meet the strict Web Content Accessibility Guidelines (WCAG), making your content accessible to everyone, including those with visual impairments.

Who Will Use This?

Web Developers & Engineers: Ensure your website complies with legal accessibility standards (like ADA and Section 508) before pushing code to production.
UI/UX Designers: Test color palettes during the wireframing and prototyping phases to guarantee that text, primary buttons, and ghost buttons remain legible.
Digital Marketers: Verify that text overlaid on social media graphics or ad banners provides enough contrast to catch the eye and be easily read on mobile devices.

How to Test Your Colors

Input Your Colors: Under the COLOR SETUP section, select your Foreground (Text) color and your Background color. You can use the visual color picker or type/paste exact HEX codes.
Use the Swap Tool: Want to see what dark text on a light background looks like instead? Click the circular Swap button between the inputs to instantly flip your foreground and background colors.
Try Quick Presets: If you need a guaranteed passing combination fast, click one of the QUICK PRESETS (like Black/Green or Classic Blue/Yellow) to load a highly accessible pairing.
Review the Score: Look at the Contrast Ratio number (e.g., 21.00:1 is pure black and white). The badges next to it will instantly tell you if the pairing passes or fails the four main WCAG criteria.
Export Your Results: Need to show proof of accessibility to a client or team member? Click DOWNLOAD PREVIEW (PNG) to export a screenshot of your passing scores alongside the live text preview.

Understanding WCAG Scores

The tool provides four distinct Pass/Fail grades based on the Web Content Accessibility Guidelines (WCAG):

AA NORMAL: The standard minimum level for body text. Requires a contrast ratio of at least 4.5:1. (Normal text is generally considered smaller than 24px, or smaller than 18.5px if bold).
AAA NORMAL: The strictest level of accessibility for body text. Requires a contrast ratio of at least 7:1.
AA LARGE: The standard minimum level for large headlines. Requires a contrast ratio of at least 3:1. (Large text is generally 24px or larger, or 18.5px+ if bold).
AAA LARGE: The strictest level for large headlines. Requires a contrast ratio of at least 4.5:1.

Common Problems & Tips

My colors fail for Normal text, but pass for Large text: This is common! A slightly low-contrast pairing might be perfectly acceptable for a giant hero headline, but terrible for reading a long paragraph of small text. Only use that color combo for big fonts.
The HEX input isn't working: Ensure you include the hashtag symbol (#) and exactly 6 characters (e.g., #FFFFFF).
Ghost Buttons vs Primary Buttons: The preview box shows how your colors look applied to buttons. Remember that Ghost (outline) buttons rely on the Foreground color for their border, which requires the exact same contrast standard as text.

Ready to make your designs accessible?

↑ TRY COLOR CONTRAST CHECKER NOW

PRACTICAL EXAMPLES & WORKFLOWS

THE COMPLETE GUIDE: COLOR CONTRAST CHECKER

1. WHAT IS THE COLOR CONTRAST CHECKER?
The Color Contrast Checker is an essential accessibility utility designed for web developers, UI/UX designers, and digital creators. It instantly calculates the exact contrast ratio between any foreground (text) color and background color, mathematically testing them against the official Web Content Accessibility Guidelines (WCAG). This ensures your websites, apps, and digital graphics are legible for visually impaired users and legally compliant with modern web accessibility standards.

2. WHY YOU NEED THIS (KEY BENEFITS)
• WCAG Compliance Check: Instantly verifies if your color combinations pass AA (minimum) or AAA (enhanced) standards for both normal and large text sizes.
• Real-Time Visual Feedback: Instead of just giving you a number, the tool updates a live preview box showing exactly what your text and buttons will look like over the background.
• One-Click Ghost View: Quickly tests how secondary or "Ghost" buttons (transparent with colored borders) will render against your chosen backdrop.
• Export Proof of Compliance: You can download a high-resolution PNG scorecard of your results. This is incredibly useful for designers who need to prove accessibility compliance to clients or project managers during the mockup phase.

3. WHO IS THIS BUILT FOR?
• UI/UX Designers: Test brand color palettes before implementing them into Figma or Adobe XD mockups to ensure the designs are actually usable.
• Front-End Developers & Web Masters: Verify that the website builds and custom CSS styles comply with legal accessibility standards (important for government, medical, and corporate websites).
• Brand Identity Strategists: Ensure that the primary and secondary colors in a new company's brand guideline document can actually be layered on top of each other legibly.
• Graphic Designers & Video Editors: Check if lower-thirds, subtitles, or infographic text colors have enough contrast to be readable on mobile screens.

4. COMPONENT & FEATURE BREAKDOWN

A. Color Setup
• Foreground (Text): The color of the typography or UI element. Use the built-in native color picker, or paste an exact HEX code.
• Background: The color of the canvas sitting behind the text.
• Swap Tool: A quick-toggle button that instantly flips your foreground and background colors to test inverted layouts (e.g., testing Dark Mode vs Light Mode).

B. Quick Presets
• One-Click Palettes: Instantly load highly optimized combinations (White/Black, Black/Green, Classic Blue/Gold, White/Red) to use as a baseline or to quickly generate accessible color pairing ideas.

C. Ratio Display & Scorecards
• Live Ratio Value: A mathematical output (e.g., 4.5:1) representing the luminance difference between the two colors.
• AA & AAA Badges: Four distinct score badges that actively turn green (PASS) or red (FAIL) based on the WCAG threshold limits for standard body text and large headline text.

D. Live Preview Box
• Interactive Canvas: Displays a large headline, body paragraph, solid button, and ghost button using your exact color choices so you can "feel" the readability rather than just trusting the math.

E. Export Result
• Download Preview (PNG): Wraps your scorecards, ratio math, and live preview into a beautiful, high-resolution PNG image file, instantly downloaded to your computer.

5. STEP-BY-STEP WORKFLOW GUIDE
Step 1: Input Your Brand Colors
Go to the "Color Setup" section. Paste your brand's primary text color into the Foreground HEX box, and your website's background color into the Background HEX box.

Step 2: Check the Math
Look at the "Contrast Ratio" panel. If the badges turn Red (FAIL), your colors are too similar in brightness.

Step 3: Adjust and Tweak
If your score fails, click the native color picker circle. Slowly drag the slider to make the background slightly darker, or the foreground slightly lighter, until the badges flip to Green (PASS).

Step 4: Export Documentation
Click "Download Preview (PNG)" to save a screenshot of your passing score. You can attach this image to your web design handoff files to prove the colors are accessible.

6. PRO-TIPS & LIMITATIONS
• The 4.5:1 Rule: For normal paragraph text (14pt-18pt), you must hit a 4.5:1 ratio to be legally compliant in many sectors. However, for large, bold headlines (18pt+), you only need a 3.0:1 ratio!
• Ghost Buttons: Ghost buttons (text and borders only) are notoriously hard to read. Use the live preview box to ensure your ghost button borders don't vanish into the background.
• WCAG AAA: Hitting AAA (7.0:1) is the gold standard for accessibility, but it severely limits your color choices. For most commercial projects, passing AA is considered highly acceptable.

Color Contrast Checker

MORE COLOR TOOLS YOU MIGHT LIKE