Skip to main content
FocusFlow Logo FocusFlow
Accessibility Tool

Color Contrast Checker

Check if your text and background colors meet WCAG AA or AAA accessibility standards in real time.

Color format
—
Contrast Ratio

WCAG Results

AA
Normal Text
—
requires 4.5:1
AA
Large Text
—
requires 3:1
AAA
Normal Text
—
requires 7:1
AAA
Large Text
—
requires 4.5:1

Share

Includes a FocusFlow tag — share with your team or post on social.

Vision simulation
24px bold — Large Text

The quick brown fox

14px bold — Large Text (bold)

Bold text at 14px qualifies as large text under WCAG 2.1.

16px — Normal Text

Normal body text. WCAG AA requires a 4.5:1 ratio so that people with low vision can read comfortably across paragraphs, labels, and UI copy.

12px — Small UI Text

Caption, helper text, timestamp, or fine print.

WCAG 2.1 Thresholds

AA Normal — ≥ 4.5:1
AA Large — ≥ 3:1
AAA Normal — ≥ 7:1
AAA Large — ≥ 4.5:1

Large text = 18px+ regular weight, or 14px+ bold.

CSS Snippet


                        


                    

                

            

        


        
        

            

                

                    

                        
                        Palette Mode
                    

                    
Palette Contrast Matrix

                    
Enter your design system colors — one per line or comma-separated. Get a full foreground × background contrast matrix with instant pass/fail results. Click any cell to load that pair into the checker above.

                

                

                    

                        
                        
                        

                            
AAA ≥ 7:1

                            
AA ≥ 4.5:1

                            
AA Large ≥ 3:1

                            
Fail < 3:1

                        

                    

                    

                        

                        
Enter colors on the left and click "Check Palette" to generate the matrix.