For my first Google Developer Expert presentation with the topic, Getting Started with Designing for Web Accessibility, I created a presentation talking about color contrast, how to test it and trying to make it as easy to understand as possible with the help of visuals.

Table of Contents

1. Tools and Widgets
2. How to use the Widgets
3. Widget Settings
4. Final design that I use for my presentations

1. Tools and Widgets

For this particular case, I created the design using the Figma design tool.

I used two widget to create the color contrast cards:

• One widget is called Color Contrast Checker by Nate Mandreza. It creates the card.
• The other one is called Contrast Checker by Zach Inglis and createts the small chip.

2. How to use the Widgets

Select two colors that you want to compare. Create a new frame in which you want to compare the foreground color with the background color to have them handy.

2.1. Color Contrast Checker Card Widget

To use the card widget, enter the HEX color code of your two colors in the input field for the foreground and background. The widget then immediately calculates the contrast and displays the contrast ratio at the top right.

The widget is in light mode. The background is a light greyish color. The first component at the beginning, which displays the WCAG AA criterion and the contrast ratio, has the background color that you set in the input field below.

2.2. Contrast Checker Chip Widget

For the chip widget to work, you must use it within the frame that you created at the beginning. Set the background color of the frame to the color you will use as the background color and add for example a rectangle (for testing purpose) in the color of the foreground color.

Activate the widget. It immediately shows you whether the contrast ratio is good or bad. It adds text inside the widget showing pass or failed as well as an icon, green and checked for pass or red and x for failed. Looks pretty cool, right?

3. Widget Settings

The widgets have a variety of settings that you can adjust. You can have them appear in different versions so that you can customize them as you wish.

3.1. Color Contrast Checker Card Widget

The widget has three different types of settings. When they are activated, the background color of the button changes from black to blue.

Show the widget in dark mode

If you click on the icon in the left-hand corner of the widget, the background color changes to the dark version.

Show labels

It is common to use labels for the colors you have set, especially for larger projects. You can add them by activating the Show labels button.

Input fields appear under foreground and background input fields and the user can enter the desired value.

Switch layout

In the settings, you can switch between a horizontal and a vertical layout. The three different settings can be activated partially, all together or not at all.

Version 1 - Horizontal Layout

Version 2 - Dark mode, Show Labels, and Horizontal Layout

3.2. Contrast Checker Chip Widget

The widget has five different types of settings.

Switch size of widget

You can change the format of the widgets with the third selection element by switching between Tiny Width, Small Width and Large Width.

Version 1 - Small Width
Showing text if the test has passed or failed and its corresponding icons.

Version 2 - Tiny Width
Tiny width shows the same as small width but appears in a even smaller format.

Version 3 - Large Width
You get the most out of the information when using Large Width. Color Contrast ratio is shown in parentheses after the icon.

Switch Text Size

The second select element of the widget let's you change the text size. Color contrast can pass tests when the text size is large enough. You can switch between Normal Text and Large Text.

Meeting WCAG AA or AAA

The first select element of the widget let's you change the WCAG criteria you want to meet. Meeting WCAG AA is the norm.

Change HEX Color Code

The forth button lets you change the HEX Color Code you are going to use as foreground color. It changes the color snippet to the one set on the left corner.

Update color changes

To update the new set color, you have to click on the last button of the widget. The new values will be calculated and the output set to pass or fail.

4. Final design that I use for my presentations

Here is the final product. With this, I can visually show how color is dependent on each other, how it fails or meets the WCAG guidelines and make it easier for my audience to understand.

Additional Resources

Learn more about the different criteria you have to meet to pass color contrast: WebAIM Color Contrast Checker
My a11y website: Accessibility First