Most color contrast tools today are built around WCAG 2.2 contrast ratios (or APCA) — they ensure your text has enough luminance contrast against the background for users to technically be able to read it.
But here’s the thing I kept running into:
Some color combinations that pass perfectly still feel awful to look at — especially in dark mode or low-light environments.
Ever seen pure white text on a black background and thought: “Ugh, that actually hurts to read”? Exactly.
I couldn’t find any existing tools or metrics that measured this kind of discomfort, so I started digging through design research and vision science to build one: an experimental metric I’m calling the Color Comfort Score.
The Color Comfort Score gives you a 0–100 score that blends together perceptual contrast, color harmony, ambient light, and more.
Many color combinations pass the WCAG 2.2 contrast minimum, but are still not comfortable to view.
For example: Pure white (#FFFFFF) on pure black (#000000) — while passing WCAG 2.2 AAA — creates maximum brightness delta, which can cause:
- halation: the white text appears to “glow” or blur.
- eye strain: especially in low-light environments (due to light adaptation in the eye).
- flicker discomfort during scrolling or transitions.
Also:
- WCAG contrast is “binary”: a color pair either passes or fails. It doesn’t tell you how comfortable it is.
- Tools like APCA improve contrast modeling, but they still don’t account for halation, ambient light mismatch, or eye strain.
- As designers/developers, we often rely on trial & error to figure out whether a color combo “feels okay.”
You get a 0–100 score, mapped to three labels:
- optimal (80 +) — ideal for extended, strain-free viewing
- ok (60–79) — acceptable, but may cause mild fatigue or disharmony
- harsh (< 60) — likely to cause glare, vibration, or eye strain
It attempts to blends six research-backed factors:
- Polarity awareness: Light-on-dark fonts tend to be more fatiguing than dark-on-light (negative-polarity penalty).
- Ambient light adaptation: Penalizes mismatch between the brightest element (text in dark mode, page in light mode) and your room’s brightness.
- Color harmony: saturated complementary hues (like red on green) are visually “vibrating” and uncomfortable.
- Vibrating-edge detection: highly saturated, opposing hues with similar lightness cause visual noise.
- Blue light at night: bright blues in dark environments are harder on the eyes than warm tones.
- WCAG contrast ratio: Baseline readability check — still a core factor.
1) Bright-on-dark (negative polarity) in low ambient and dark-on-bright (positive polarity) in low ambient.
bg: #000
fg: #fff
ambient: dark
WCAG: 21:1 pass
Comfort: Harsh (glare from bright text)
Zoom image will be displayed
bg: #fff
fg: #000
ambient: dark
WCAG: 21:1 pass
Comfort: Harsh (glare from bright background)
Zoom image will be displayed
2) Highly saturated, near-complementary hues with acceptable contrast.
bg: #00008b // navy
fg: #ff8c00 // dark orange
ambient: bright
WCAG: 6.6:1 pass
Comfort: Harsh (similar lightness — vibrating edge)
Zoom image will be displayed
3) Bright blues in dark ambient
bg: #000
fg: #00bfff // deep sky blue
ambient: dark
WCAG: 9.9:1 pass
Comfort: Ok (downgraded by blue-light penalty)
Zoom image will be displayed
Try it out: https://vedmakk.github.io/kontrast/
Enable “Color Comfort Scores” and play around with color combos.
WCAG’s Contrast guidelines and the new APCA are very useful tools in terms of plain accessibility — and for the most part the results align with the “Color Comfort Score”. But there are some ambient-light dependant cases where it can make a difference… and even though it might not affect accessibility in cases of visual impairments (which is the main goal of WCAG) — it can account for fatigue, neurodiversity, dark mode, or display ergonomics.
So this is still very experimental, and I’d love your thoughts on:
- Does this model feel useful?
- Did I miss an existing solution?
- Any edge cases you’ve run into?
- Ideas for making it more designer-friendly?
Whether you’re into accessibility, design systems, UI ergonomics, or color theory — I’d love feedback.
-Jan
.png)


