Contrast Checker calculates the contrast ratio between foreground and background colors so text and controls are more likely to meet WCAG-oriented thresholds.
Enter two colors, read the ratio and pass/fail style cues on the page, then adjust lightness until body text and large text targets look healthier.
Passing a ratio is necessary but not sufficient for full accessibility; still test with real users and other WCAG criteria.
What Contrast Checker does
Measure contrast between two colors with WCAG-oriented feedback.
- Foreground color input
- Background color input
- Numeric contrast ratio output
- WCAG-oriented indication for common text sizes
- Hint describing intended use
Who Contrast Checker is for
- Designers validating text on brand colors
- Frontend developers checking CSS token pairs
- QA running accessibility smoke checks
- Content teams reviewing callout banners
How to use Contrast Checker
1. Open Contrast Checker on beeforge.dev.
2. Set the foreground (text) color and the background color.
3. Read the contrast ratio and WCAG-oriented results.
4. Tweak colors in your picker, then re-check until targets pass.
Features
- Ratio math aligned to common WCAG contrast practice
- Separate intuition for normal vs large text where shown
- Fast local recalculation as colors change
- Works with colors copied from the picker tool
- No audit account required for a pair check
Examples
- Verify white text on a brand orange button.
- Check muted gray labels on a dark dashboard surface.
- Confirm link color contrast against article backgrounds.
Tips and limits
- Placeholders and disabled states often fail contrast; design intentional alternatives.
- Gradients and images behind text need sampling of the worst area.
- Alpha compositing changes effective colors; flatten before measuring.
- Non-text UI components have their own contrast criteria in WCAG 2.x.
Related tools
- Color Picker & Converter to adjust HEX/RGB/HSL values while you iterate
FAQ
Does a pass mean the page is accessible?
It means that color pair meets the checked contrast criteria. Accessibility includes much more than contrast.
Where is the ratio calculated?
In your browser from the two colors you enter.
Which WCAG level is shown?
Follow the on-page labels for AA/AAA style thresholds when presented.
Can I check multiple pairs at once?
Check pairs one at a time here, or script bulk audits in your design pipeline.
Do brand colors always fail?
Sometimes. Lighten or darken text roles, or add supporting surfaces, instead of abandoning the brand entirely.