CSS-Kontrast-Checker

Contrast is not a matter of taste, it is accessibility. People with low vision, older users, anyone on a cheap display or in sunlight - they all live and die by the contrast between text and background. The CSS Contrast Checker makes that value visible instead of leaving it to gut feeling.

The checker computes your contrast ratio per WCAG 2.1 and tells you instantly whether your combination reaches level AA or AAA - separately for normal and large text, because different thresholds apply there. You enter foreground and background as hex, RGB, RGBA, HSL, HSLA or a CSS colour name; the checker understands all common notations.

Alongside the classic WCAG ratio, the tool also computes APCA, the Accessible Perceptual Contrast Algorithm. APCA is a draft for future WCAG versions and not binding yet. APCA judges contrast more perceptually, especially for thin fonts and in dark mode where the old ratio often gets it wrong. So you get both perspectives at a glance.

So you get not just a verdict but a solution, the checker simulates the common forms of colour blindness - protanopia (no red), deuteranopia (no green), tritanopia (no blue) and achromatopsia (no colour). And when a combination fails, the suggestion engine proposes adjusted colours that meet the requirements without completely upending your look.

For bigger jobs there are two more modes. In palette mode you check a whole colour scheme at once and see which pairings work together. In batch mode you feed in real CSS, and the checker extracts the colour values and audits them in one pass - handy when you want to test an existing design for accessibility.

This is more than an exercise: with the German Accessibility Reinforcement Act (BFSG), contrast requirements are mandatory for many digital services in Germany from June 2025. Ready-made presets - from freely chosen colours in a government style to the deliberately terrible gov-web grey disaster - show you what good and bad contrast look like in practice.

Everything runs in your browser. No colour value, no CSS snippet is sent to a server. No account, no signup, no data transfer - just fast, honest contrast values.