HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Not everyone perceives color the same way. Red-green color blindness is the most common form, it affects up to 8% of males. Some use grayscale mode to curb their phone addiction
Not everyone perceives color the same way. Red-green color blindness is the most common form, it affects up to 8% of males. Some use grayscale mode to curb their phone addiction.
Do not use color as the only visual indicator of a meaning.
The most common example of this is to style links without underline or border.
Browsers underline hypertext links by default. It is possible to remove the underline using Cascading Style Sheets (CSS), but this is a bad idea most of the time. Users are accustomed to seeing links underlined.
WebAIM: Links and Hypertext
Wikipedia is one example where color alone is used for styling links. In the grayscale version of the site, it is not possible to see what is plain text and what is a link.
Underlined links
Add underline to links. Or, do not remove them. Keep in mind that they can reduce readability.
To improve readability, we can use CSS properties like text-underline-offset
and text-decoration-color
.
text-underline-offset
and text-decoration-color
to improve readability.Color as status
Add text and/or icons to communicate meaning, in addition to color.
Note: The following tools gives a rating for the contrast assuming that you are using it as text color.
Many combinations that are not suitable as background/color combinations, are perfectly usable as colors for graphics, buttons, etc.
The tool Contrast Ratio uses color to communicate if a color contrast is good or not. Red means bad contrast. In this example you might say that the number is another indicator. That is a valid argument. However, you are then assuming that the user understands the metric contrast ratio and knows about the guidelines.
The tool Coolors Color Contrast Checker uses three methods to tell us whether or not a color combination is good:
Do not rely on color alone. Do like Coolors, use two or three methods.