We are excited to have added four new color themes to some of our block-based levels, bringing the total to five themes!

At Code.org, we understand that block-based coding is visual in nature, and we have found success in differentiating blocks by color based on their function. However, we also recognize that this benefit was previously less accessible to students with color vision deficiency (CVD).

With the introduction of our new color theme feature, we hope to make our tools more accessible and inclusive for all students. In this support page, we will explain how to select a color theme, describe each theme and provide answers to frequently asked questions.

We are working on growing this list, but currently it includes: Poetry, Dance Party, Flappy Bird, Bounce, Sprite Lab and Project Beats labs.

Accessing Color Themes

To switch themes, the student should right-click anywhere on the workspace that is NOT a block.

This action will reveal the Workspace Menu (as seen in the photo below).

The student should then click on whichever theme they would like to activate.

Dark mode can be used in conjunction with any of the color themes. 

Figure 1: Modern Default Theme (with dark mode off):

Figure 2: Protanopia Theme (with dark mode on)

Theme Descriptions:

Modern Theme

The Modern theme is our default color scheme, featuring bright, vibrant colors that make it easy to differentiate between different types of blocks.

This theme is perfect for users who enjoy a bold and energetic aesthetic, and it is a great starting point for those who are new to the tool and don't have any specific color blindness needs. 

High Contrast Theme

The High Contrast Theme is designed to maximize contrast and readability, with deeper colors and a larger font size of 16pt.

This theme is particularly useful for users with visual impairments or sensitivity to bright light, as it provides a clear and high-contrast workspace.

Protanopia

The Protanopia theme is designed specifically for users who are red-weak or red-blind, providing a color scheme that is easy to distinguish for those with these conditions.

This theme can be used with or without the Dark mode feature, and is a great option for users who experience difficulty differentiating between red and green.

Deuteranopia 

The Deuteranopia theme is designed specifically for users who are green-weak or green-blind, providing a color scheme that is easy to distinguish for those with these conditions.

This theme can be used with or without the Dark mode feature, and is a great option for users who experience difficulty differentiating between red and green.

Tritanopia

The Tritanopia theme is designed specifically for users who are blue-weak or blue-blind, providing a color scheme that is easy to distinguish for those with these conditions.

This theme can be used with or without the Dark mode feature, and is a great option for users who experience difficulty differentiating between blue and green.

If you have any questions, concerns or feedback, please reach out to accessibility@code.org.