Related
Following up on a question asked here regarding contrast ratio requirements for WCAG AA, I'm trying to figure out the best solution for a conflict between WCAG guidelines and the corporate identity guidelines of the product I'm designing for.
Throughout the product's UI, the brand's primary color is mostly applied for buttons. The combination of light text with the brand's primary color results with insufficient contrast ratio. For achieving sufficient contrast, I tried darkening the button label text color or the background color of the button (see attached screenshot). However, changing the color of the brand won't be an acceptable solution for various reasons.
Apart from using dark text for button labels, how else could I achieve sufficient contrast ratio without modifying the brand's primary color?
You can't achieve sufficient contrast for AA level without changing the background color, or using a darker text.
In order to find the good matching color, you have to convert your color to HSL color space instead of RGB. Then conserving the Hue and Saturation you can change the luminosity and test the color.
This way you can find a color like #0F7FAD which will match your initial color, just being a little darker.
I empathize with you, I've struggled many times with trying to meet A11Y guidelines and design language / brand guidelines at the same time. It's not a battle that's easily or quickly won, but I applaud you for working to make the web more inclusive!
An option that has pushed the conversation further for my team in the past was to allow the end-user to choose the version of the site that they need or wish to use.
Do they want high-contrast styling?
Build an option in to replace the stylesheets - and apply the brand colors in different methods.
Other questions that may fit in to the topic area:
Do your users want enlarged or generously spaced text sizes?
What about enlarged UI elements?
How about a colorblind set of stylesheets?
TLDR: UI's are most often not one size fits all, so think about tailoring accessibility offerings in an a-la-carte manner. Let the consumer choose what they need!
Hope this helps, let me know how it's going!
I'm a computer engineer with deuteranomaly (green-weak vision). WampServer's displays an orange icon when some services are running, which violates usability/accessibility guidelines because it's difficult to differentiate from the green and red icons, and the only difference between the icons is the color. This means I need to lean in close to the monitor and/or hover over the icon to tell what's going on, which is rather annoying. How can I make these icons more clear?
About 1/12 men are color deficient, and about 90% of software developers are male, so this poor color choice impacts about 7% of WampServer's users.
Status icons should follow best practices and use a clear high-contrast scheme that spans the spectrum (ex: blue, yellow, red) and incorporates symbols instead of relying solely on color. Why limit colors to the most problematic ~50 nm range of wavelengths when you've got ~300 nm to work with? Moreover, the human brain is highly sensitive to shapes - effective user interfaces don't rely solely on color. Plus, some developers may alter their monitor's color gamut either directly or by using an app like f.lux.
For anyone who's unfamiliar with the human eye, here's a graph of human cone cell spectral sensitivities showing how close the medium- and long-wavelength cones' peaks are. Dichromats must find this extremely frustrating.
The icons WampServer uses are contained within a bitmap file called images_off.bmp, which you can find in the wamp or wamp64 folder.
I have attached a modified version of images_off.bmp that adds white/gray symbols above the point of the W - an X, a triangle, and a checkmark. Simply replace the file (backing up the original if desired) and close and reopen the program.
I encourage anyone who's involved with UI decisions to read up on best practices and use better color and symbolic choices, as bad decisions can severely impact the usability of products.
What are some algorithms that help accessibility for colorblind people? I'm guessing color reduction could help, but honestly I can't find much information on the internet other than smartphone apps (not even papers).
Rationale: Recently, my CRT monitor stopped outputting magenta, so after a little research this seems to be a bit similar to how someone with tritanopia sees. Basically, anything in the red spectrum will be output as shades of blue. Although I could buy a new monitor, I'd like to know a software-based fix; this situation has got me interested in building accessible applications.
The best way to solve legibility problems for folks who are color blind is to increase the color contrast ratio. Web Content Accessibility Guidelines require a minimum contrast of 4.5:1 (3:1 for large text).
There are a handful of contrast analyzers out there. Google's Accessibility Developer Tools includes algorithms for checking contrast and recommending alternatives.
If you were inclined, you could use this library to create a browser extension that dynamically changes CSS on a page to make content meet the required contrast ratio.
Why are comments different colors in different programs? Is it just aesthetic or is there an actual reason?
It depends on the settings in your IDE or editor. Comments don't have a set colour. They are just letters.
I assume it is to make them stand out so people do not easily confuse them with code.
To confuse color-blind managers.
purely aesthetic
Comments are colored differently to make them stand out from the rest of the code (making it easier to read and follow along the comment trail).
Why they are certain colors is entirely up to the makers of the editor in question (usually based on usability studies), but you can almost always change these using the settings of the IDE.
As Aiden said, it's really up to whoever is implementing the IDE to choose. I'm familiar with green code comments, as both SQL Server Management Studio and Visual Studio are green by default, but there's no reason why a developer couldn't (for instance) choose fuschia, or lemon yellow, or chartreuse, in their IDE. Loaded into another IDE, the "code comments" would display in that IDE's colour.
It is strictly aesthetic. If you use a good IDE or text editor, you can change the color of the comments to be whatever color you like!
I use Visual Studio 2008 at work and I see a lot of the guys changing the colors for reserved words, to class names, to you name it.
Most programs allow you to customize color schemes, including the color of comments. Coloring source code, comments and other things, allows the code to be more readable. The choice of particular colors is personal and aesthetic.
I am assuming you mean "development environments" when you say "different programs".
But in general, you are correct. There is an aesthetic, as well as usability, component to it. Development Environment (IDE) makers (e.g., Microsoft's Visual Studio) do usability studies to determine what colors are "best" for development. Like what color to make keywords, comments, etc.
But these default color preferences are generally easily changeable by the user.
Gray or green are used for comments, as the other colours have more desirable properties and so are reserved for more impactful areas of the code.
For example, tight loops are often in red to make them go faster, and code for children is often blue (for the same reason they learn handwriting in blue), to make it less difficult and more familiar. Blue is often also used for language keywords and APIs to make them easier to understand.
Very important code or comments are in green, due to the increased ability of the human eye to discern green.
Black and grey are used for tedious and boring areas of the code, to encourage you to look elsewhere, such as the bright and exciting interfaces and documentation (which are in blue and green as above).
Viruses, trojans and the like are always written in white, so they can evade detection by the majority of desktop themes.
It's just for aesthetics and usability, it makes it clear what will and will not be compiled into code, and what's important to read to understand what's going on.
I'm not really sure what you mean, but I'm assuming you are wondering why different IDEs use different colors for comments in their syntax highlighting. It's mostly just aesthetic, but you can usually change the colors if you want.
back in the day, the screen was black and all of the letters were green! they are various colors to help you determine the usage of each (comment, command, variable, etc.) isn't progress grand!
I have a couple of pet projects where I'm the sole designer/programmer and I spend too much time changing the user interface to make it easier to use by real users and avoiding bright yellow and green that is so common on "programmer" designs.
Do you have tips to choose a color scheme when you do not have a graphics designer around? How do you avoid creating the typical "programmer" interface?
kuler has a lot of user submitted colour schemes
edit: just remembered... also try colorlovers
Let me tell you a story.
I have absolutely no confidence in my ability to make aesthetic choices - you only have to look at the way I dress to realize I'm justified in my lack of confidence. Anyway, years ago I was put in charge of writing the gui for a new product (the "Clip Editor" in Cineon, for anybody who knows that). I sketched out a design, but asked my boss, the head of sales and marketing, and various "application specialists" for help choosing the colours. Nobody responded, so I said "to hell with it", and chose a colour scheme so ugly I'm sure the beta testers would recoil in horror and demand a change. But they didn't - so it shipped with it. And I heard that customers loved the "bold colours". And not only that, but a few years later a competitor added a program that looked like a direct rip-off of my Clip Editor to their product, and they copied my colour scheme!
For desktop apps, get the colors from the OS. I, personally, want all of my apps to look and feel the same as my OS.
For web apps, I'm not really sure.
Keep in mind that nearly 10% of the male population of the world have some significant form of color blindness. You should always consider this when choosing interface colors (especially if you need capital - guess what? 1 in 10 male investors might not see your red dots on the green background chart showing risk vs return!).
MSDN has a reasonable overview of this, and there are several website filters that show you what your site (or any site) looks like given any form of colorblindness.
Aside from that, I really like COLOURLovers - not only do they have a great selection of user tagged and defined color schemes, they give them to you in a variety of ways, and you can sign in and track your favorites (or your favorite color scheme producers).
Go check out the fall themes! Can't go wrong with Michigan colors when the leaves change...
-Adam
Colour guides like Kuler are a great start if you have no idea about choosing colours.
Some basic considerations:
Use contrast not colour to differentiate in your design. This is to accommodate colour-blindness and poorly sighted users.
Use as limited a colour palette as you can. Pick one colour as your 'theme' and choose shades of that colour, and then maybe one or two contrasting colours to go with it.
Get advice - doesn't have to be from a designer, you might still know someone who has a good eye for these things. Also, more broad feedback - ask a few people for their opinion, that can help.
Lately I have been using the following website: http://www.nickherman.com/colormatch/
to help me (also a non-designer) pick matching color schemes. I usually find a color that is fairly pleasing, then use the matching colors from this website.
If all else fails, I also ask my wife!
I like using ColourSchemer and EasyRGB.
Some updated resources I use:
Colorotate.org is a nicely designed site with user-contributed palettes of various sizes (unlike kuler that provides only 5 colours per palette). It allows you to see how the combinations look to various type of color-impaired people.
colorschemedesigner.com generates consistent palettes for you using various algorithms (complement, triad, tetrad...)
Adobe's Kuler website has a lot of user-created color schemes uploaded by designers. I normally search for higher ranked schemes first.
There are a lot of "color theme pickers" on the web. If you use these, your colors will at least look like they belong together. The first one I looked at on google: http://www.yafla.com/dforbes/yaflaColor/ColorRGBHSL.aspx?
Aim for pastel colours that are slightly dimmer than their full-blown counterparts, i.e. a pastel red is dimmer than a (255,0,0) red for example. Try to select colours from the same palette, one cheaty way of determining colour schemes I use is to take a screenshot of an Office 2007 app, usually excel, and paste out some colours from their co-ordinated palettes using the colour dropper tool in an app like Paint.NET. In fact this cheaty approach to be extended to 'borrowing' colour schemes from applications that are already out there that have colours schemes you admire :-)
If you pick a "theme" color for your app, you can use Kuler to help flesh out the palette.
Related post:
Web 2.0 Color Combinations
I know I've seen more, but can't find them :)
I tend to use alot of grays, along with black and white, keep things simple and avoid any kind of annoying, bright colors. Seems to me like that's what the SO guys did.
Vitaly Friedman's Essential Bookmarks for web designers & web developers list a lot of online color tools, also a condensed version
There is also a list of color tools on twiki.org that has some additional sites.
I recommend you start by reading up on computational color theory. Wikipedia is actually a fine place to educate yourself on the subject. Try looking up a color by name on Wikipedia. You will find more than you expect. Branch out from there until you've got a synopsis of the field.
As you develop your analytic eye, focus on understanding your favorite (or most despised) interface colors and palettes in terms of their various representations in different colorspaces: RGB, HSB, HSL. Keep Photoshop/GIMP open so you can match the subjective experience of palettes to their quantifiable aspects. See how your colors render on lousy monitors. Notice what always remains readable, and which color combos tend to yield uncharismatic or illegible results. Pay attention to the emotional information conveyed by specific palettes. You will quickly see patterns emerge. For example, you will realize that high saturation colors are best avoided in UI components except for special purposes.
Eventually, you'll be able to analyze the output of the palette generators recommended here, and you'll develop your own theories about what makes a good match, and how much contrast is needed to play well on most displays.
(To avoid potential frustration, you might want to skip over to Pantone's free color perception test. It's best taken on a color calibrated display. If it says you have poor color perception, then numeric analysis is extra important for you.)
Why do programmers think they can't have dsign skills? It's a pet peeve of mine. It's a learnable skill, just like anything else.
http://www.hackification.com/2010/05/16/designing-a-vs2010-color-scheme-consistency-consistency-consistency/