Teacher

If enabled, Buzz supports both a light color scheme and a dark color scheme, so it's important to make sure your content is accessible in both. Before publishing anything, take a moment to preview it in both the light and dark color schemes. It's the fastest way to catch a contrast problem before a student does.

Common causes of contrast issues

Text and background colors that work fine in one color scheme don't always work in the other. Applying any color to text in Buzz locks that color in both schemes. It's easy to author content while looking at only one color scheme and not realize it isn't accessible in the other until it's previewed there.

This usually happens one of two ways:

• Pasting in styles without realizing it. Content copied from Google Docs, Microsoft Word, a PDF, or another web page often carries hidden text and background colors with it. Black text on a white background is the most common case — it looks like plain, unstyled text in the light color scheme, so there's nothing to notice until it's previewed in the dark color scheme and the "black" text turns out to be explicitly colored rather than automatic.
• Choosing a color in one color scheme without testing the other. If you pick a text or highlight color while working in one scheme, it's easy to assume it'll look fine everywhere.

Two approaches to getting this right

Approach 1: Use Buzz's defaults

The simplest and most reliable approach is to leave text at its default formatting. Default text automatically displays with correct contrast for whichever color scheme a student is using — no extra work required.

If you do want to apply color to some text, choose a color that's accessible in both color schemes. Buzz's contrast standards are based on WCAG's Contrast (Minimum) success criterion, which is a good reference for checking that a color choice holds up.

You can also color a title or other text using Buzz's color tools and apply a background color to that same text. Doing this makes the contrast between the text and its background look the same in both the light and dark color schemes. This is often a functional fix rather than an aesthetic one — it guarantees the text stays readable, but the block itself often doesn't look like it "belongs" to both color schemes the way default text does.

Approach 2: Style the content directly for full control

If you want complete control over exactly how a piece of content looks, you can style it directly with a small amount of HTML rather than relying on Buzz's color tools. This means setting both a background color and a text color explicitly, so the pair is self-contained and doesn't depend on Buzz's color scheme at all.

This requires editing beyond just picking colors — it means working in the editor's HTML/code view — and the result will not be responsive to whichever color scheme the viewer has selected. It will look exactly the same in the light and dark color schemes because it no longer adapts to the color scheme at all. Think of it like "printing" the content.

Worth knowing: WCAG doesn't require that content be offered in both a light and a dark version — it only requires that the contrast be accessible. A fully static, non-adapting block like this is still compliant, as long as the contrast within it holds up.

To do this, wrap the entire content in a <div> that sets both properties together, for example:

<div style="background-color: #1e4620; color: white; padding: 20px; box-sizing: border-box;">

...and close it with </div> after the content that should use these fixed colors.

A few notes on that example:

• background-color and color are the two properties doing the actual work — set them together, and check that the pair has strong contrast (aim for at least 4.5:1) using the WCAG standard linked above.
• padding keeps text from touching the edges of the box; box-sizing: border-box keeps that padding from making the box wider than intended.

Because this technique intentionally locks a section out of Buzz's color scheme system, use it selectively — for content where a fixed, specific look is genuinely required — rather than as a general substitute for Approach 1.

Don't forget about Activity Themes

Activity themes let you customize the layout, background, headers, footers, and card styling for an activity or folder — and they're worth testing for the same reason as text.

A theme's background color or image is a fixed design choice that doesn't automatically adapt between the light and dark color schemes, so the same two approaches above apply here too: favor Buzz's defaults where you can, and if you want a specific custom look, make sure it holds up in both color schemes (or is deliberately styled to look the same regardless of color scheme) before applying it broadly.

Since themes can be applied to many activities at once and carry over automatically into templates, it's worth testing before it gets applied broadly rather than after.

Fixing content that's already affected

If you're cleaning up an activity or template that already has contrast problems, you have two ways to fix it depending on how the color got there.

Option 1: Clear formatting through the color picker (recommended for most authors)

For text where the color was accidental (usually from a paste) and you want it to just go back to Buzz's automatic default:

1. Select the affected text.
2. Open the text color picker in the editor toolbar.
3. Click the trash can icon in the color picker to clear the color entirely, rather than choosing a new color.

This fully removes the color instruction from that text, so Buzz's automatic default takes over again for both color schemes — the same result as if the color had never been applied.

Option 2: Edit the HTML directly (for content with many affected elements)

Content pasted from an outside source often applies a color to every paragraph, list item, or table cell individually, which can make clearing each one through the color picker slow. If you're comfortable working in the HTML view:

1. Open the activity or content item in the editor's HTML/code view.
2. Look for style="..." attributes on your elements and remove the color: and background-color: entries from them (leave other styling, like font-weight or text-align, in place).
3. Switch back to the visual editor and confirm the text now displays using Buzz's default color in both color schemes.

This is the faster path when a whole block of pasted content — like a bulleted list where every item has its own inline color — needs to be cleaned up at once.