10 tools to check the contrast of your design to improve its "readability"
We offer you a translation of Roger Johansson ’s article 10 to improve the accessibility of your design . Translation from alexbig
In my daily work, we create graphic design for most sites of our clients, but not for all. Some of them themselves or with the help of design studios make a visual design and leave the transition to HTML + CSS + JavaScript and CMS for us. When this happens, I almost always encounter problems with insufficient color contrast in the design. Sometimes these problems are quite minor and permissible, but often there are areas that need to be corrected.
')
If you're wondering why I care (and why I think you should take care of) the color contrast of a website is very simple. If the text does not have sufficient contrast with its background - people will have problems. Anyone who suffers from color blindness or those who surf the Web in not ideal conditions (poor monitor, reflection of windows, glare from the sun) will not be able to read the text, at least without difficulties.
You don't want that, right? If you publish any text on the site, as most of us do, I guess it is because you want it to be read. Therefore, color contrast, whether you think about it or not, is very important for you, your customers and end users.
I am so used to checking the contrast of any design made by me or with my help that I take it for granted that every one of us should do. Apparently, this is not the case, and it seems to me that I should share with you a list of tools that will help check the contrast of color. About this article.
A very brief explanation of how color coefficients are calculated correctly: there are several different algorithms, some applications use the luminosity contrast ratio algorithm mentioned in the WCAG 2.0 draft, while others use the color brightness and color difference algorithm (color brightness) and color difference algorithms) , mentioned in the accompanying WCAG 1.0 document. Some of them use both.
I note that none of them are approved by the W3C (at least for now), but they are quite suitable for determining whether the combination of text color and background can cause problems for color blind people or people with other visual impairments.
Having mentioned all this, let's move on to the tools themselves. Some of them can be used via the web, while others are individual applications or browser add-ons.
Here is the list:
All the tools mentioned here by me are free, so try them all to find what suits you in your daily work. I do not think that there is a big difference what exactly you will use to determine the contrast ratio and to imitate the color blindness application.
Tools to simulate color blindness will let you understand how hard it can be for a person suffering from this to distinguish links that differ only in color from the text surrounding them.
Finally, I do not think that the results of these applications (or, rather, the algorithms they use) should be followed blindly . Large headlines and text that is not important may not pass the test, while the main text (for example, the text of the written article) is necessary.
Use these results as a guide to action, attach your common sense here, and you will be able to find a balance between common contrast and pleasant aesthetics.
From alexbig : in order not to look for shoals after design - do it right from the very beginning (or explain to designers how to use it, if it does not depend on you!).
10 tools to check the contrast of your design to improve its "readability"
In my daily work, we create graphic design for most sites of our clients, but not for all. Some of them themselves or with the help of design studios make a visual design and leave the transition to HTML + CSS + JavaScript and CMS for us. When this happens, I almost always encounter problems with insufficient color contrast in the design. Sometimes these problems are quite minor and permissible, but often there are areas that need to be corrected.
')
If you're wondering why I care (and why I think you should take care of) the color contrast of a website is very simple. If the text does not have sufficient contrast with its background - people will have problems. Anyone who suffers from color blindness or those who surf the Web in not ideal conditions (poor monitor, reflection of windows, glare from the sun) will not be able to read the text, at least without difficulties.
You don't want that, right? If you publish any text on the site, as most of us do, I guess it is because you want it to be read. Therefore, color contrast, whether you think about it or not, is very important for you, your customers and end users.
I am so used to checking the contrast of any design made by me or with my help that I take it for granted that every one of us should do. Apparently, this is not the case, and it seems to me that I should share with you a list of tools that will help check the contrast of color. About this article.
A very brief explanation of how color coefficients are calculated correctly: there are several different algorithms, some applications use the luminosity contrast ratio algorithm mentioned in the WCAG 2.0 draft, while others use the color brightness and color difference algorithm (color brightness) and color difference algorithms) , mentioned in the accompanying WCAG 1.0 document. Some of them use both.
I note that none of them are approved by the W3C (at least for now), but they are quite suitable for determining whether the combination of text color and background can cause problems for color blind people or people with other visual impairments.
Having mentioned all this, let's move on to the tools themselves. Some of them can be used via the web, while others are individual applications or browser add-ons.
Here is the list:
- Color Contrast Check : The first truly intuitive online tool from Jonathan Snook for checking colors that I know allows you to bring the foreground and background colors in a hexadecimal format or with sliders. The tool gives an instant result - shows how this combination looks like and whether it passes the test.
- Color Contrast Analyzer : Gez Lemon's Color Contrast Analyzer uses the same algorithm as the first, so the results should be the same. The difference is that there is no instant effect and no sliders. This means that you need to first enter the values in the form and send it to see what happened.
- Color Contrast Visualiser : Using a slightly different approach, Tom Hooper's Color Contrast Visualiser helps you find acceptable color combinations to highlight colors that give sufficient contrast to the color palette. Color Contrast Visualiser is available in Flash and Adobe AIR formats, install the appropriate add-ons (plug-ins) to work if they are not available.
- Color Contrast Analyzer Firefox Extension : instead of entering colors manually, Gez Lemon's plug-in for Firefox will find all the text elements in the document and check the difference between the background and the color of the text. He will open the results in a new tab, with a preview of colors. This may seem a bit tedious, but it is a good way to find problematic design places. Unfortunately, this tool does not recognize images, so use it on an HTML document without graphics.
- CSS Analyzer : another tool from Gez Lemon, the CSS Analyzer, which tests the color contrast of your CSS . It also validates the CSS and checks that the appropriate text size is specified in relative units.
- Luminosity Contrast Ratio Analyzer : this tool was also made by Gez Lemon - it checks the foreground and background colors using the algorithm developed by the Trace R & D Center .
- Vischeck : a color blind simulator, which can be used online or as an add-on to Photoshop (will appear in the “Filter” menu). The online version simulates the effect based on the image you upload, and the Photoshop plugin changes the colors of the document you are working on.
- Contrast Analyzer, Version 2.0 : applications for Windows and Mac OS X. A very elegant application that can do quite a lot in addition to analyzing the web page for you. You can specify the foreground and background color with numbers or sliders, specify which algorithm to apply - color / brightness or lightness, then check and show the selected colors in comparison with different types of visual impairment.
- Graybit : online tool, authors: Jona Fenocchi and Mike Cherim. It does what the name tells you - you enter the URL to the web page, which will be turned into grayscale and displayed in the browser.
- Sim Daltonism : Available only for Mac OS X, this application does not calculate contrast, but does something useful. It simulates different types of color blindness in real time, which makes it easy to check whether design creates problems.
All the tools mentioned here by me are free, so try them all to find what suits you in your daily work. I do not think that there is a big difference what exactly you will use to determine the contrast ratio and to imitate the color blindness application.
Tools to simulate color blindness will let you understand how hard it can be for a person suffering from this to distinguish links that differ only in color from the text surrounding them.
Finally, I do not think that the results of these applications (or, rather, the algorithms they use) should be followed blindly . Large headlines and text that is not important may not pass the test, while the main text (for example, the text of the written article) is necessary.
Use these results as a guide to action, attach your common sense here, and you will be able to find a balance between common contrast and pleasant aesthetics.
From alexbig : in order not to look for shoals after design - do it right from the very beginning (or explain to designers how to use it, if it does not depend on you!).
Source: https://habr.com/ru/post/14071/
All Articles