Have you ever looked at a web page and gotten a headache trying to read it? In the early days of web design, there were some truly hideous color combinations out there that were almost impossible to read — the good old green lettering on a red screen combo, every colorblind individual’s nightmare. People were trying to be creative. They didn’t want to have black words on a white page. That’s boring, and there weren’t as many color choices available because our monitors and browsers couldn’t handle many colors.
Black and white may be “boring” to some people, but there is a good reason that books have been printed this way for hundreds, if not thousands, of years, and that reason is contrast.
The human eye needs to have contrast between colors to comfortably be able to read. The higher the contrast, the easier it is to read. For colors that have a low contrast, the text will need to be larger for the human eye to be able to read the text. The word accessibility is important for web designers, but I often hear it mostly in use for screen readers for the visually impaired. We should be including Alt Text on our images so that screen readers will read them on images so that visually impaired individuals will know what is on a web page that is loaded with images or graphics. However, there are plenty of people who have perfectly good eyes that do not want to have to strain to look at a website.
Sometimes, you will want to have some color variation in your text design. We feel that links are a good example of this. They are not huge swaths of text, so if the contrast is not as strong here, it isn’t so serious, but designing all of your content with low contrast colors is not something that should be done. This Contrast Ratio site is a great tool to help determine if your text and background colors are going to be comfortable for your users. This site will even give you suggestions for when the font size will pass accessibility testing. For web designers, this is a good tool for when you have a client that is suggesting a color combination that you know is not going to be a good idea for users.
As web designers, we need to always think about our end users. Their comfort is important, so keep that contrast ratio in mind when you are designing your sites.