♀

WCAG Color Contrast Checker

Test multiple text/background color pairs against WCAG 2.1 AA and AAA standards. Live preview shows exactly how text will look at different sizes and weights.

Design Tools Runs locally No data sent
wcagaccessibilitycontrast ratioa11y
Export Color Pairs 

    

      
      
    

  


  


  


  

    💡
    

      WCAG AA requires 4.5:1 for normal text, 3:1 for large text (18pt or 14pt bold). WCAG AAA requires 7:1 for normal text, 4.5:1 for large text. Aiming for AA is the legal minimum in most accessibility regulations.
    

  


  



  

    
What is WCAG AA Contrast Checker?

    
Check color contrast ratios against WCAG AA and AAA standards. Test multiple text/background color pairs at once. Free, browser-based, no data sent.

  


  

    
How to Use WCAG Contrast Checker

    
    
      
  1. Enter a foreground (text) color and a background color using the color pickers or by typing HEX values.
    2. 
      
  2. The tool instantly calculates the contrast ratio between the two colors.
    3. 
      
  3. Check the AA and AAA pass/fail results for normal text and large text.
    4. 
      
  4. Adjust colors until your combination meets the WCAG level you need.
    5. 
      
  5. Copy the passing color values for use in your CSS.
    6. 
    

  






  
Related Tools

  

    👁️
Color Blindness Simulator
Simulate protanopia, deuteranopia, tritanopia on any image

    🎨
Color Picker
Convert colors between HEX, RGB, HSL, and CMYK

    🎨
Color Palette Generator
Generate complementary, analogous and triadic color palettes

  






  
    Understand WCAG AA Contrast
    ▾
  
  

    

      Example
      

        

          

            Input
            Foreground #1F2937 on background #FFFFFF
          

          

            Output
            Passes WCAG AA for normal text and large text
          

        

      

    

    

      Common Use Cases
      

        
    
          
  • Check text colors against WCAG AA before launch
    • 
          
  • Review accessibility regressions in design-system tokens
    • 
          
  • Verify heading and body text contrast separately
    • 
          
  • Hand off compliant color pairs to product teams
    • 
        

      

    

    

      Frequently Asked Questions
      

        
What is the difference between AA and AAA?
AA is the standard compliance level required by most regulations. AAA is enhanced —not required for all content but improves readability.

        
Does this check non-text contrast?
WCAG 1.4.11 requires 3:1 contrast for UI components and graphical elements —this checker covers that requirement.

        
What does WCAG Color Contrast Checker - Batch AA/AAA Test do?
WCAG Color Contrast Checker - Batch AA/AAA Test runs entirely in your browser and helps you complete this task without uploading data to a server.

        
Is WCAG Color Contrast Checker - Batch AA/AAA Test free to use?
Yes. This tool is free to use and does not require sign-up.