Step 1: Choose a Contrast Tool
On the HeronTool website, find the Contrast Checker tool. It accepts foreground and background colors (hex, RGB, or HSL) and displays the WCAG 2.1 contrast ratio in real time. For quick color picking, use a browser extension like HeronTool's Color Picker.
Step 2: Enter Colors and View Results
- Enter the text color in the "Foreground" field and the background color in the "Background" field.
- The tool automatically calculates the contrast ratio (e.g., 4.5:1) and indicates whether it meets AA or AAA standards.
- If it fails, click the "Swap" button to switch foreground/background, or use the "Lighten/Darken" sliders to adjust. For body text, AA requires at least 4.5:1, AAA requires 7:1.
Step 3: Apply to Real Designs
- For small text (<18pt), always meet AA; large text (≥18pt or 14pt bold) requires 3:1.
- On the Contrast Checker page, you can save common color combinations and generate accessibility reports for team review.
- Test all states: links, button hovers, disabled states, to ensure consistent contrast.
FAQ
Q: How is the contrast ratio calculated?
A: The tool uses a luminance formula automatically—no manual math needed.
Q: Do decorative elements need checking?
A: Non-text decorations (like background patterns) are exempt, but icons and text must be checked.
Q: How can I quickly find compliant colors?
A: Use the "Suggestions" feature in HeronTool, which provides nearby recommended swatches.
Tag
