00:03:25.600
Welcome back, everyone! We can make a Python pun out of that. Look at this: we rescued some gorgeous socks from customs, and they are here at the registration desk. So, if you want a pair, be sure to go to the registration desk after the Weasel's talk and the closing notes. They are spectacular; they match the theme perfectly. It's coral, not just red. Perfect!
Louisa Barrett is a developer and designer. She has been in this field for ten years, and she has been a developer for four of those. Currently, she teaches a front-end program at the training school for software and design, which has a rather long title. Today, she will share some practical tips about how to make your applications much more accessible, ensuring that everyone can use them and have a great experience.
00:05:01.740
All right, thank you! Hi, I'm Louisa, and I am thrilled to be part of this event this year. My excitement is not solely because there is a disco ball above me and I get to use a microphone, making me feel like I'm in a boy band; that is definitely part of it!
Today, I will talk about color, colorblindness, and accessibility. I'm on Twitter at wecb, and I'm the director and founding instructor of the front-end engineering program at The Turing School of Software and Design. Our school is a nonprofit, full-time, seven-month immersive developer training program located in Colorado, USA, which works to increase opportunities for underrepresented groups in the tech industry.
To give you some background about myself, I've been a designer for just under 15 years. For the last five years, I have shifted gears, spending more time writing code than doing design work. Color and color theory is one of my favorite topics to teach. It combines science, human factors, and aesthetics, and can significantly impact user experiences. Moreover, color can be leveraged to enhance functionality for users with vision impairments, leading to improvements in usability for everyone.
00:06:00.669
I love building things for people; this is a major aspect of why I enjoy design, development, and teaching. Everyone who uses the internet deserves to have an accessible experience without significant barriers to entry. As software engineers, designers, and product owners, we are in a unique position to foster positive change in our teams, products, and processes to make our products more usable and accessible for all users.
This consideration makes sense from both a human and a business perspective. Mindfulness of accessibility allows you to reach a broader audience while also enhancing the experience for your existing users. So, let's get started!
In this talk, we will cover understanding colorblindness, types of color vision deficiencies, strategies for effective typography, accessible UI elements, and tools and resources you can use right away.
00:07:00.000
To understand how to use color more effectively for colorblind users, we need to understand colorblindness more comprehensively. Let's start with the causes of colorblindness. Most cases of colorblindness are genetic or hereditary; a smaller number may be acquired due to illness, medication, or age. The hereditary form of colorblindness comes from a defect on the X chromosome, leading to more men than women experiencing it. Because it is genetic, certain populations are more likely to be impacted by it, and exact percentages vary based on specific regions or populations studied.
Understanding the causes of colorblindness involves recognizing the physical parts of the eye that work together to provide the images you see. At the front of the eye, the iris, lens, and cornea work together like a projector to transmit light waves onto the retina at the back of the eye. The cause of colorblindness lies in the retina, responsible for passing light information down the optic nerve to the brain.
00:08:06.690
The retina contains two types of cells: rods and cones. Cone cells are primarily responsible for translating light into color. Color perception is determined by the wavelength of light. By detecting the wavelength of incoming light, the eye determines the color it perceives. A fully functional eye contains three types of cone cells, known as L cones (responsible for red and yellow wavelengths), M cones (responsible for green wavelengths), and S cones (responsible for blue wavelengths).
It's crucial to clarify that colorblindness does not equate to blindness. Most colorblind individuals can see things as clearly as those with full color vision, but they may struggle to perceive red, green, or blue light. Colorblindness is also referred to as a color vision deficiency, which is significantly more common than many might realize. It affects approximately 1 in 12 men (about 8%) and around 1 in 200 women worldwide.
00:08:57.000
This means a notable percentage of people, roughly 4.5% of the population, is impacted by color vision deficiencies, which breaks down to about 13 million people in the US alone. Not all color vision deficiencies are the same; within that 4.5%, not everyone experiences color vision in the same way. So, let's explore the different types of color deficiencies.
First, we need to understand what constitutes normal color vision. Normal color vision utilizes all three types of light cones in the retina and is known as trichromacy. People with full color vision can see the full spectrum of colors without issues. On the far side of the screen, we have a color bar that demonstrates how someone with normal color vision perceives the colors of the rainbow: red, orange, yellow, green, blue, and purple.
00:09:57.000
Ishihara plates are sets of visual tests created in 1917 by Dr. Shinobu Ishihara at the University of Tokyo to evaluate if a patient has red, green, or blue color deficiencies. A person with normal or full color vision would read the numbers 8, 12, and 42 from these plates. However, we will revisit these plates as we discuss various types of color deficiencies and see how individuals with these deficiencies perceive the numbers differently.
Three common types of colorblindness include deuteranopia, protanopia, and tritanopia.
Deuteranopia is a condition marked by reduced sensitivity to green light, making it the most common type of colorblindness. Individuals with this condition struggle to perceive greens and reds, making it challenging to distinguish between certain shades.
00:10:36.820
The color bar on the side illustrates how a person with deuteranopia perceives the colors of the rainbow, where contrast and clarity between some colors are diminished. Here we can observe potentially problematic color pairings as viewed by someone with this type of colorblindness. The top squares represent what someone with full color vision sees, while the bottom squares show how someone with deuteranopia perceives those colors, making it evident how these combinations can be confused.
00:11:03.000
Ishihara plates would have them read the numbers 3, 12, and 4 instead of 8, 12, and 42. The second common type is called protanopia, which is a reduced sensitivity to red light. Those who are protanopic face challenges similar to those with deuteranopia when it comes to color perception. The color bar illustrates how protanopes perceive colors differently from individuals with normal color vision, revealing difficult color pairings to avoid, such as blacks with shades of red or dark greens with dark oranges.
Looking at Ishihara plates, someone with protanopia would perceive the numbers 3, 12, and 2.
00:12:20.000
Finally, tritanopia refers to a reduced sensitivity to blue light. Although it's less common than red-green color blindness, it still substantially affects people's experiences. The color bar further highlights the differences in color perception for individuals affected by this type of colorblindness.
There are also certain color combinations to approach with caution, including light blues with grays and dark purples with blacks. Those affected by monochromacy lack the ability to see any color at all, perceiving the world in grayscale, which is relatively rare.
Having established a foundation for colorblindness and common deficiencies, we can discuss effective strategies for using color.
00:13:36.320
The first rule is to avoid relying solely on color. It's essential to leverage tones and values—the lightness and darkness of a color. Because most people with colorblindness can still interpret differences in light and dark easily, this can be a practical strategy for conveying important information.
A classic design example in this realm is the London Underground map, which serves as a great reference for design yet presents challenges for visually impaired users. The map primarily uses colors, lacking distinct line weights or textures to differentiate among lines effectively. Users with colorblindness may struggle to parse the map as many colors are visually similar.
00:14:44.000
In contrast, effective communication in design relies not only on colors as demonstrated by stop signs, which have a unique shape and large high-contrast lettering that communicates clearly even in grayscale. Similarly, NYC subway signage uses both colors and clear typography to aid users who might struggle with color distinctions. Although the signage utilizes colors, like the red and green disks, it still ensures legibility through solid typography which is effective in both grayscale and color.
00:16:07.260
These examples demonstrate that successful design is fundamentally about communication where typography is an essential tool in a designer's toolbox. Regardless of color, well-formatted, highly legible text remains a vital part of effective communication. Written text serves as a substitute for spoken words and in-person interaction, which means readability is crucial for successful websites and digital products. Being conscious of making typographic styling accessible to everyone is not only beneficial but reinforces the overall user experience.
00:17:00.840
Moreover, strategies that enhance readability for people with colorblindness inherently improve site usability for all users. With this in mind, here are some high-level typography concepts paired with thoughtful use of colors that can help maximize text impact.
First, consider sizing your body text appropriately; it’s generally advisable to start with sizes between 14 pixels and 24 pixels for screen-based media. Next, ensure that your line height, the distance between two lines of text, is proportionate to the font size—usually, a line height of 120 to 145 percent of the font size yields great results.
00:18:04.640
For optimal legibility, maintain between 45 to 90 characters per line, which has been shown to be the ideal length for readers’ eyes traveling across lines of text. With these simple typography rules, it's crucial to understand how color impacts reader experience. The key takeaway regarding typography is that contrast is essential. When we discuss contrast, we're referring to the relationship between the color of text and the background against which that text is overlaid.
00:19:30.740
The contrast between the text and the background is just as important as font choice. Fortunately, the W3C’s Web Content Accessibility Guidelines outline acceptable contrast ratios for various sizes and weights of text.
But what is a contrast ratio? A contrast ratio measures the difference in brightness between colors on screens. In technical terms, the contrast ratio is the ratio of the brightness of the brightest color to the brightness of the darkest color a system can reproduce, ranging from 1:1 to 21:1.
00:20:07.440
The first number refers to the brightness of the lighter colors while the second refers to the darker colors. For visually impaired users, finding appropriate contrast between elements is crucial. The WCAG 2.0 guidelines recommend a minimum contrast ratio of 4.5:1 for visual presentation of body text and images embedded as text, such as icons. This ratio is crucial in addressing the loss of contrast that users may experience due to different factors such as low visual acuity, age-related loss of contrast sensitivity, or color deficiencies.
00:21:07.050
As an illustration, this sample shows a text and background combination with a 4.5:1 contrast ratio. The text nestled on this background is about 14px (equivalent to roughly 18.66px) and bold, or 18pt (about 24px) or larger.
For larger or bold text, a minimum ratio of 3:1 is also acceptable, which allows for slightly lower contrast between the background and body text. This ratio may work especially well for larger text sizes, which are naturally easier to read.
00:22:07.220
To give practical examples, consider the range of acceptable contrast ratios while aiming for a target of 4.5:1. Users who experience some vision impairment or loss equivalent to 20/80 will require a higher ratio of 7:1, ensuring text and titles are easily discernible.
Through various color choices and different contrast ratios, we can observe how distinctions in readability manifest. The top example meets criteria for both small and large text, while the centered example is acceptable for large text, but fails for smaller text. The bottom example carries issues for both text sizes.
00:23:57.990
Now that we’ve covered color contrast ratios, let’s delve into some advanced challenges. When layering text over images—an approach often seen in design—text legibility can become challenging. Images can have light areas and dark tones, complicating readability. As developers and designers, we need to ensure that the text remains legible over any image.
00:24:53.060
A practical method for achieving better contrast is to use a drop shadow effect on the text. This adds a distinction between the letters and the image, provided the image does not feature extreme light or white areas. An improvement can come from applying an opaque overlay over the image, which enhances readability by dulling extreme bright and dark spots. This method ensures high contrast while being able to appreciate the image beneath, as demonstrated in the example.
00:25:46.220
In terms of typographic strategy, maintaining simplicity with high-contrast color combinations and a limited color palette usually yields the best results when it comes to text. After discussing typography, we now shift to common user interface elements and discuss strategies to address color accessibility problems.
00:26:58.950
Forms are an essential aspect of user interaction; hence success and error messages are prominent zones where red and green colors are often used. However, due to the prevalence of red-green sensitivity as the most common colorblindness type, relying solely on color can create significant barriers for users.
For example, a form using colors exclusively to highlight its status can create confusion for individuals with color vision deficiencies. It's essential to integrate more than one strategy to communicate messages effectively, such as using icons and explicit error messages to ensure users glean clear information regarding their progress or issues.
00:28:35.420
Similarly, data visualization tools, like graphs and charts, can exhibit reliance on color alone. The reduced visibility spectrum for the colorblind makes interpreting color charts difficult. A quick solution is incorporating both text and texture in graphs, improving clarity and ensuring greater accessibility across diverse user demographics.
00:29:48.930
Another category in need of attention is e-commerce, focusing on color filters. Typically, these filters rely on color swatches alone, which poses problems for users who can't distinguish between colors. Addressing this issue can be as straightforward as adding text labels alongside color swatches, boosting usability for everyone.
00:30:43.490
In addition, inline links present a unique problem. Most often, inline links are simply indicated through color changes, relying solely on a blue color for visibility. While successful for users with full color vision, this approach can be problematic for users with color vision deficiencies who might miss important information. Thus, the well-established convention of using underlined hyperlinks returns as it employs effective visual cues for users, creating a more accessible interface.
00:31:36.390
Now, let's discuss some practical resources you can implement right away. Various color contrast checkers exist, including the WebAIM Color Contrast Checker, which helps evaluate color combinations for visibility standards. If you're looking for a simpler tool, you can use Leav Aroo's contrast checker, which is beneficial for quick checks without extensive options.
00:32:04.120
The No Coffee Vision Simulator allows you to simulate various color vision deficiencies and monitor the accessibility of your designs. Color Safe Co aids in creating accessible color palettes, while Coolers Co features a color palette generator with visual previews, allowing you to inspect your palette's accessibility throughout development.
00:32:47.440
For teams, Trello provides a colorblind-friendly mode that uses textures in addition to colors so that displays are inclusive for diverse users. Code editors also benefit from enhanced syntax highlighting themes designed for accessibility, catering to those with varying color vision capabilities.
00:33:09.210
Thank you very much for joining me today! [Applause, Music]
So, is this still on? Great, let’s return to the party.
00:34:22.310
Hi everyone, and by that, I mean, please listen—I hope you're enjoying your time at the end of Day 1. Make some noise if you had a good time! [Applause, Music] Thank you, that really means a lot to us—we're so grateful to have you here. I hope you enjoyed today and that tomorrow will be even better. Is that even possible?
I must share that these socks have arrived. If you have been waiting around for them, thank you for your patience; they are at the registration desk, and they'll be there tomorrow too. Now, I’ll turn things over to Ramon to share information about the party and other plans!
The party starts at 8 o'clock at The Loft, only a short walk or a quick metro ride away. Drink vouchers are included in your bags, which can be used for both alcoholic and non-alcoholic beverages, and remember, the code of conduct still applies.
00:36:51.000
Please submit your proposals for future events as well as any ideas for lightning talks. If you choose not to attend the party or don’t want to drink, feel free to pass your drink voucher to someone else who may greatly appreciate it. You can raise your hand if you'd like to claim an unclaimed drink voucher!
Also, we’re reminding you the deadline is midnight tomorrow.