this post was submitted on 03 Nov 2024
481 points (97.6% liked)

World News

32348 readers
356 users here now

News from around the world!

Rules:

founded 5 years ago
MODERATORS
you are viewing a single comment's thread
view the rest of the comments
[–] Qwaffle_waffle@sh.itjust.works 3 points 2 weeks ago (2 children)

Is there a website that can help me make sure I am covering colorblind? Like my work does green/red for pass/fail, but we are trying to add some alternate colors for user to enable as needed.

[–] Cort@lemmy.world 2 points 2 weeks ago

Make the green a little bluer.

[–] KammicRelief@lemmy.world 2 points 2 weeks ago* (last edited 2 weeks ago)

Yes! One easy/good one to use is https://webaim.org/resources/contrastchecker/ It lets you pick two colors, and you can even use the eyedropper tool in their Color Picker box to select a color right off your screen. Then it'll tell you the Contrast Ratio of the two selected colors. Higher is better. It will give you a pass/fail for WCAG AA and AAA (two levels of web accessibility standards). I just now checked the red and green from the linked map and it had a ratio of 1.3:1 which is a fail for both AA and AAA.

Some websites (like Trello) give accessibility options to skip colors altogether, and use patterns (cross-hatch, polka-dot, etc.). But in general, going for a high enough contrast ratio should be good enough. I'm a web dev as well and we just run everything through one of those WCAG tools (I believe we've been using the WAVE browser plugin) and fix it until it passes. :) But, being the colorblind one on the team, I can often just be like "uhmm, that one ain't gonna work." lol.

btw sorry I got so spicy in my initial comment. I really wanted to see the map. :P

Edit: Another reply to my comment had a link to a more colorblind-friendly version of the map, with red and blue instead of red and green. Much clearer to my eyes. I eyedropped those two colors into that webaim checker, and I was surprised to see it also failed quite badly on the color contrast! For example you wouldn't want red text on a blue background (unless it was a bright red and dark blue, or vice versa). But for map colors, well... I guess that goes to show that for colorblind checking you have to use a little common sense and know what the most common no-no combos are (red/green seems to be the most common). I checked the accessibility docs at my work just now and we sometimes use this site to check what a site looks like under various types of colorblindness: https://www.toptal.com/designers/colorfilter