New Color Contrast Mode launches to support Scratchers with disabilities
Access the feature from your settings menu now!
By Valerie I
New Color Contrast features just launched on the Scratch site, and our team is excited to share the new changes with you!
The initial concept for the Color Contrast project was inspired by former Scratch Team member and Creative Producer Zoë Bentley, known on Scratch as Zinnea. Bentley is passionate about accessibility and is visually impaired herself. While at Scratch, she served as the Head of the Accessibility Committee, where she advocated for our team to better support Scratchers with a wide range of disabilities. After months of research, design auditing, and cross-team collaboration, Bentley’s work and commitment to accessibility have morphed into a movement that will enable even more young people to imagine, play and create with Scratch.
We recently spoke with our Director of Design, Tif Gagnon, about what users can expect from the new feature. Tif is a skilled designer with over 15 years of experience in the EdTech sector. Before joining the Scratch Team, Tif worked as the Lead Interactive Designer at Curriculum Associates, where she led the design of their K-2 digital reading programs. She believes in the power of creative learning and strives to combine her skills and passions to support making Scratch accessible and engaging for all learners around the world.
Here’s everything you need to know!
What is the Color Contrast Project?
This project aims to ensure that Scratch can be seen and used by as many people as possible, including those with visual impairments or disabilities. Color contrast refers to the ratio of how light a color compares next to another color. When a particular combination does not meet the contrast ratio, it can be very hard, if not impossible, for some users to distinguish between those colors — which makes important elements, like buttons or blocks, difficult to use.
There are two parts to the Color Contrast project. The first was the development of a new color mode for the blocks that meet Web Content Accessibility Guidelines. The other part of the project involved updates to the colors on the Scratch website to meet the appropriate contrast ratio. These changes mean that folks who have visual impairments or disabilities can better detect and distinguish between important elements on the screen, making the site more usable.
What was it like imagining the creation of these new blocks and colors, and what role did Scratch Lab play in that?
Once we designed our new color mode, we used Scratch Lab as a testing environment where we encouraged educators and Scratchers to try out the new high-contrast blocks. A survey was available in the editor if they wanted to provide feedback.
The survey revealed that people with visual impairments did indeed prefer high-contrast blocks. On the other end, we learned that people without visual impairments did not like the high-contrast blocks because they considered them less aesthetically pleasing.
In the spirit of Universal Design for Learning (UDL), we decided that having the option to toggle between block settings would be the best approach. Users can stick with the original colors if they prefer or switch them if they benefit from the high-contrast version.
An incidental finding was that educators who use projectors in classrooms also prefer high-contrast blocks, which is interesting.
When working towards accessibility for one group, I often find that when you want to make something accessible, it usually benefits more than one group. Ramps built into sidewalks were designed to help folks with wheelchairs, but they also help people with strollers. So these high-contrast blocks help people with visual impairments and can also help in classrooms.
What can folks expect from the new feature?
The original blocks are going to be what appears to users when they first open the editor. We’ve added a Settings dropdown where users can change their color mode and language. They can toggle back and forth whenever they need to.
Once they toggle to the high-contrast blocks, all of the blocks in their editor will change from a very saturated color with white text to a more muted color with black text. Aside from that change, they will see updates to the editor itself; this includes the toolbar framing elements and icons, which will change from blue to purple. Users can also expect to see these sorts of color changes outside of the editor.
How does the Color Contrast project fit into our plans to expand more accessible pathways to creative coding?
This project is just one step on our journey toward making Scratch more accessible.
Accessibility is something that we’re baking into every new thing we do here at Scratch while retroactively ensuring that what we have can also be made more accessible. Every month, our team meets with industry leaders in the STEM field to focus on accessibility and learn from others who may be further ahead.
You can learn more about upcoming projects by visiting Scratch Lab!
We want to thank our community of Scratchers and educators for their thoughtful feedback and support throughout this process. Thank you for the opportunity to learn and create with you. Scratch on!
