TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Vischeck: Test how your site looks to someone that is color blind

51 点作者 icodemyownshit超过 15 年前

11 条评论

alan_p超过 15 年前
I've got a green colour impairment.<p>I'm not colour blind. I'm not even green blind. And I'm definitely not red/green blind.<p>If you're thinking about colour impairments, please keep this in mind: just because some people have a colour impairment that doesn't mean they are all colour blind (most of them aren't). They can see just what you can see, but some parts of the spectrum may appear paler and thus the nuances may be hard to tell apart. They'll probably have little problem telling two colours apart when they touch, but can't reliably recognise them as distinct when they're not.<p>It's okay to use colour in your design. It's even okay to use colours that are often problematic for people with colour impairments. It's not okay to RELY on them, tho. Especially if you rely on telling roughly similar colours apart (say, bluish purple and blue, or even dark red and dark green).<p>If you have to use colour as a signal, use another one as a failsafe -- use different patterns, borders or underlines in addition to different-coloured fills, outlines and texts.<p>The idea is not to sacrifice, but to enhance -- this is true for every form of accessibility, actually.<p>If you can't use strongly contrasting colours (i.e. different hue and value at high saturation) due to design constraints, simply make sure colour is not the only contrast you provide -- if all else fails just use markup to ensure the unstyled page still retains a contrast.<p>Oh, and don't forget to set your background and text colours in pairs. Even if you want to keep the default for one of them (white background, black text). This is not for accessibility alone, this is also for people like me who use a dark desktop theme and curse every time they see a form with black text on a (desktop default) dark background or a white background with (desktop default) bright green text on it. Like this very form I'm writing in -- good thing the web developer toolbar comes with a "ignore page colours" option.
评论 #943415 未加载
camccann超过 15 年前
These little "here's how it would look" tools work well enough for sanity-checking images on a computer monitor, but don't necessarily tell you much about what someone will actually see. Color blindness makes a lot more sense if you have a decent grasp on how human color vision <i>actually</i> works.<p>Quick summary: Most people have four different types of light receptors. One type responds to all colors, the other three have overlapping response curves covering parts of the visible spectrum. Perception of hue and saturation derives from the <i>differences</i> between how strongly the three color receptors react--even "pure" colors will usually trigger at least two color receptors. Because of this, for any given triple of receptor response strengths, there are many combinations of light that will cause it; the RGB color system exploits this, using three colors in varying proportions to create a large range of perceived colors.<p>Colorblindness is a catchall term for defects in one or more type of light receptor. Which type, and the nature of the defect, can cause widely divergent effects.<p>Some people have anomalous response from one type; i.e., a nonstandard response curve. In practice, this means that their color vision essentially works like anyone else's, but the set of light combinations that cause a given response differ, so two colors that look identical to you may look different to them! For instance, if the medium-wavelength receptor's curve is shifted downward to further overlap the long-wavelength receptor's curve, reddish colors will seem more green and bluish colors will seem less green. Compared to a normal spectrum, this makes the cyan range shorter and the yellow range larger, making it harder for the individual to distinguish between mixtures of red and green.<p>Other people lack one color receptor type <i>entirely</i>, and thus have only two-axis color perception instead of the normal three. Losing the long or short receptors makes extreme reds or blues effectively invisible, while losing the medium-wavelength receptors leaves the individual with a full range of sensitivity, but able to perceive only a single gradient between colors. Note also that this collapses hue and saturation into a single axis; for instance, to someone with only the long and short receptors, there are both purples and greens that will look like white light.<p>A very few people have only one type of color receptor, or none at all, and thus perceive only overall brightness, with no color at all.
评论 #943221 未加载
SteveC超过 15 年前
It seems that colour blind people can't see css background images either.
评论 #943419 未加载
chanux超过 15 年前
Now this makes sense : <a href="http://www.tshirthell.com/funny-shirts/fuck-the-colorblind/" rel="nofollow">http://www.tshirthell.com/funny-shirts/fuck-the-colorblind/</a>
评论 #943130 未加载
weeksie超过 15 年前
I picked the first one, then looked at the upload. At first I was like "Hey, this is exactly the same!" Then I realized that it was a good indication that I'm probably a bit colorblind. At least now I know why I can't be trusted to chose a color palette.
评论 #943114 未加载
TheThomas超过 15 年前
I use Color Oracle for this sort of testing: <a href="http://colororacle.cartography.ch/" rel="nofollow">http://colororacle.cartography.ch/</a>
adamc超过 15 年前
Failed on the url I picked to test (www.utexas.edu). My initial reaction is this would make a great FF plugin. As a site, there are a lot of limitations -- I'm not going to want to give it the URL of a secured site I'm logged into, for example.<p>Interesting idea, though, so I wish them success.
3dFlatLander超过 15 年前
Being completely colorblind, I'm a little bummed they didn't have an option to look at sites from that point of view. Almost every site I visit has some little thing that's hard to read.
评论 #943111 未加载
评论 #944204 未加载
评论 #943094 未加载
jhancock超过 15 年前
I'm proud to say my site passes all tests with flying colors!! Under the first test, I think the colors actually look better. Thanks for the quick check tool!!
keltecp11超过 15 年前
wow... being colorblind myself and looking at the examples... now i feel really screwed up. see: <a href="http://www.vischeck.com/examples/" rel="nofollow">http://www.vischeck.com/examples/</a>
评论 #943061 未加载
discojesus超过 15 年前
This has inspired me to launch my own service. Here is how your site looks to someone that is just plain blind:<p><a href="http://imgur.com/ToRW6.jpg" rel="nofollow">http://imgur.com/ToRW6.jpg</a>
评论 #943116 未加载