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. Checking perceptual contrast? Try our APCA Contrast Checker — the candidate method for WCAG 3.

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.

                    

                

            

        


        
        
        

            

                
How the contrast ratio is calculated

                

                    WCAG 2.1 defines contrast as a ratio between the relative luminance
                    of two colours — a measure of how much light each one emits, weighted for how sensitive human vision
                    is to red, green and blue.
                

                

                    Each channel is converted from its 0–255 value to a 0–1 range, linearised to undo the
                    sRGB gamma curve, and then combined as
                    L = 0.2126R + 0.7152G + 0.0722B.
                    Green carries the most weight because the eye is most sensitive to it. The two luminance values are
                    then compared as
                    (Llighter + 0.05) ÷ (Ldarker + 0.05),
                    which gives a value between 1:1 (identical colours) and 21:1 (pure black on pure white).
                

                

                    The 0.05 term models the light that a real screen reflects even when displaying black, which is why
                    the scale tops out at 21 rather than running to infinity. Note that this model ignores font size and
                    weight and treats dark-on-light the same as light-on-dark — limitations the
                    APCA contrast checker
                    is designed to address.
                

            

        


        
        

            

                
Frequently Asked Questions

                

                    

                        
                        
WCAG 2.1 Level AA requires at least 4.5:1 for normal body text and 3:1 for large text, meaning 18pt (24px) and above, or 14pt (18.66px) and above when bold. Non-text elements that carry meaning — form borders, icons, focus indicators, chart segments — need at least 3:1. Level AAA raises the text thresholds to 7:1 and 4.5:1.

                    

                    

                        
                        
AA is the level that accessibility law and procurement standards almost always point at, and it is achievable across an entire design system. AAA is a stricter quality target at 7:1 for body text. WCAG itself states that AAA conformance is not required as a general policy for whole sites, because some content cannot reach it. Treat AA as the floor and AAA as the goal where the palette allows.

                    

                    

                        
                        
Text at 18pt (24px) or larger, or 14pt (18.66px) or larger when bold. Larger letterforms present more stroke area to the eye, so they stay legible at a lower ratio — which is why large text only needs 3:1 at AA instead of 4.5:1.

                    

                    

                        
                        
Four things: text in a disabled control, pure decoration that conveys no information, text that forms part of a logo or brand name, and text that is incidental to a photograph. Everything else has to meet the threshold — including placeholder text, error messages and helper text, which are the most common real-world failures.

                    

                    

                        
                        
Yes, completely, with no sign-up. It runs entirely in your browser — the colours you enter are never sent anywhere. The same is true of the APCA contrast checker, the colour blindness simulator and every other tool on this site.

                    

                    

                        
                        
Contrast is only one variable. Thin font weights, small sizes, tight line height, long line lengths and low-quality font rendering all reduce legibility at a ratio that technically passes. The WCAG 2 formula also ignores font size and weight entirely. If a passing combination still feels wrong, check the typography — and try the same pair in the APCA checker, which is size- and weight-aware.

                    

                

            

        


        

            

                
Related Accessibility Tools

                

                    
                        
APCA Contrast Checker

                        
Perceptual Lc contrast — the candidate method for WCAG 3.

                    
                    
                        
Color Blindness Simulator

                        
Preview designs across 8 vision types.

                    
                    
                        
Readability Checker

                        
Grade your text with 5 formulas.

                    
                

            

        


    
        

            

                
Guides that go with this tool

                

                    
                        
WCAG color contrast explained

                        
AA vs AAA, large text rules, and where each number comes from

                    
                    
                        
How to check color contrast

                        
A practical workflow for auditing a palette

                    
                    
                        
Accessible color palettes

                        
Building a palette that passes before you design with it

                    
                

                

                    All of FocusFlow's free tools are listed on the tools page,
                    and the blog covers the reading-accessibility topics behind them.