Documentation
Contrast Checker
The Contrast Checker in Sip helps you ensure your designs meet accessibility standards by simulating text contrast and validating color combinations. With a single toggle, you can check contrast ratios and fix problematic colors directly in the app.
And an example of an AAA result:
Why Contrast Matters
Over 300 million people worldwide experience visual challenges. Validating contrast ensures your designs remain accessible to all users, helping you comply with WCAG standards.Contrast Scoring System
The checker assigns a contrast score to each color combination:- AAA (>7.00): Highest level of accessibility
- AA (4.50–7.00): Good contrast for text
- Fail (<4.50): Insufficient contrast for readability
Example: A score of 19.21 is considered excellent and meets AAA standards.
Accessing Contrast Checker
You can access the Contrast Checker in two ways:From the Toolbar Menu
Click the Check Contrast option in the toolbar to launch the tool.
From the Main View
When editing a palette, the Contrast Checker appears alongside the Custom Formats panel.
Simulating and Fixing Contrast
Simulating Contrast
The Contrast Checker displays your text and background colors, alongside a contrast score. Adjust colors using the sliders or the color fields. The score updates in real-time.
Fixing Contrast Automatically
If a combination doesn’t meet accessibility standards, use the Fix button to automatically adjust the color for better contrast.
Editing Colors
You can manually adjust text or background colors to fine-tune your contrast.
Check Contrast Results
The checker will visually indicate the contrast level:- Fail: Not enough contrast for readability.
- AA: Good contrast for regular text.
- AAA: Excellent contrast, meeting enhanced readability standards.
And an example of an AAA result:
Tips for Better Contrast
Example: Pair dark text with light backgrounds and vice versa to maximize contrast.