Color contrast errors in Google Sites
Good color contrast ensures that text and other elements are readable for all visitors, including those with low vision or color vision deficiencies.

To achieve sufficient color contrast, the text color and background colors need to have a minimum contrast ratio of 4.5:1. 

You can use free tools like WebAIM's Contrast Checker to find a color combination that works. This tool accepts hex color codes and rgb color codes.

Adjusting text color

  1. Click on the text box you want to edit.
  2. Use the Text color option in the toolbar to choose a darker or lighter color that improves visibility.
  3. Select a color from the available presets or add your own custom color that meets the minimum ratio of 4.5:1.

Adjusting background color

  1. Select the section where the text is placed.
  2. In the section menu, click on the paint palette icon.
    This will bring up a new menu where you can choose a different background preset.
  3. If needed, you can customize your site's Theme settings to pick colors with stronger contrast.

Known issue: Navigation bar contrast

We're aware of a contrast issue in Google Sites navigation bars, where link text may appear as accessible (e.g., white text on a maroon background) but is still being flagged as a contrast error. This is due to Google Sites' underlying code and results in a false positive in PopeTech’s contrast checker.

The Office of Information Technology (OIT) is actively working on a solution. We'll share an update when a fix is available, along with instructions if any manual action is needed.

Related resources