Finalsite + AudioEye: Fix a color contrast flag

A step-by-step walkthrough for editors, from finding the flagged element on your page to confirming the fix. Part of the AudioEye how-to series: practical guides for the most common issues your AudioEye report surfaces.

In this article

• Why color contrast matters
• What AudioEye shows you
• Step 1: Find exactly where on the page the issue is
• Step 2: Confirm the current contrast ratio
  • Recommended tools
  • Contrast targets to pass WCAG 2.1 Level AA
• Step 3: Choose a compliant color
• Step 4: Apply the new color in Composer
• Step 5: Verify the fix
• Want to see this in action?
• Still stuck?

Why color contrast matters

Color contrast is one of the most common accessibility issues on websites, and one of the most invisible to the person who created the page. If you have typical vision and you're working on a full-brightness monitor in a normal indoor room, text that passes or fails contrast can look more or less the same to you.

The people it affects include: readers with low vision, readers with color vision differences, anyone reading on a phone in direct sunlight, and older readers whose contrast sensitivity has decreased with age. For all of them, text with low contrast is the difference between "I can read this" and "I'm giving up."

What AudioEye shows you

On your AudioEye report, color contrast issues show up with a message like "Element has insufficient color contrast" (or similar wording). The report tells you the page URL and the element type, but not always exactly where on the page that element sits. That's what the on-page scanner is for.

Step 1: Find exactly where on the page the issue is

Open the page your AudioEye report flagged, then add /?oss=1 to the end of the URL. For example: https://www.yourdistrict.org/about/?oss=1 (or use &oss=1 if the URL already has other parameters). Press Enter and wait about a second; the AudioEye Accessibility Page Scanner panel appears on the page.

The scanner highlights the specific element with insufficient contrast and shows you:

• The WCAG 2.1 success criterion involved (typically 1.4.3 Contrast (Minimum) or 1.4.11 Non-text Contrast)
• The current contrast ratio
• The foreground and background colors it detected
• A plain-language description and help text

Step 2: Confirm the current contrast ratio

The scanner's reported ratio is usually enough, but if you want to double-check, or if you want to experiment with alternate colors before you commit, paste the foreground and background hex codes into a contrast checker.

Recommended color contrast tools

• WebAIM Contrast Checker: Industry standard; also suggests compliant color adjustments via a lightness slider.
• AudioEye Color Contrast Checker: Enter two hex codes, get an instant WCAG AA/AAA pass or fail.
• TPGi Colour Contrast Analyser: Free desktop app with an eyedropper to sample colors directly from your screen, useful when you don't have a hex code.
• Tanaguru Contrast-Finder: Suggests the closest valid color to your original that will pass.

Contrast targets to pass WCAG 2.1 Level AA

• Normal body text: 4.5:1
• Large text (18pt+ or 14pt+ bold): 3:1
• UI components (buttons, form borders, focus outlines, icons that convey meaning): 3:1

Step 3: Choose a compliant color

Open up your selected contrast checker, drop in your current foreground and background colors, and nudge one of them (foreground, background, or both) until the ratio passes. 

A few practical tips:

• Start by darkening the text or lightening the background, not both, so the change stays close to your brand.
• If your brand palette includes a darker or lighter variant of the same hue, use that first.
• Avoid fixing contrast by adding bold everywhere. Bolding changes the target from 4.5:1 to 3:1 only at 14pt and larger; it does not help at smaller sizes.
• For icons and buttons, remember the 3:1 rule applies to the element's edges or meaningful shape, not just any text inside it.
• If your brand palette doesn't include a compliant variant, it's worth a conversation with whoever owns your brand guide. Accessible contrast is a design constraint, not a styling preference.

Step 4: Apply the new color in Composer

Where you change the color depends on where the element lives:

• Text inside a Content element: Select the text, open the color picker in the content toolbar, and apply the new hex code.
• Buttons or call-to-action elements: Edit the element's style settings. Most Finalsite button components expose color variability, if any, in your site's Style Guide.
• Site-wide colors (headers, navigation, footer, default link color): These also live in your site's theme and css. Changing them there updates every page at once. Before making any changes, be sure to check out the guide, "Composer Themes overview." Not sure, email accessibility@finalsite.com to get help before making any site-wide changes.

Step 5: Verify the fix

1. Publish your change.
2. Reload the page with /?oss=1 on the end of the URL.
3. Confirm the scanner no longer flags the element. If it does, double-check the hex codes in the scanner's detail panel; you may be styling a nested element (like a link inside a paragraph) that inherits a different background than you expected.

Want to see this in action?

If you're learning the workflow or training a teammate, it's useful to work through a real report first:

• Live scanner practice: Pick any page on an AudioEye-enabled site and append /?oss=1. You can step through the flagged elements and their contrast ratios in real time, without changing anything.
• Finalsite's own AudioEye report: Browse the contrast flags in a live dashboard to see how they appear.

Still stuck?

If the scanner shows a contrast issue you can't trace to a specific element, or if the element seems to inherit colors from somewhere you can't edit directly, email accessibility@finalsite.com. Send the page URL and a quick note on what you've tried, and we'll help trace it.

Related articles

• Accessibility management with AudioEye (the overview article, including how the scanner and the report work together)
• AudioEye FAQs (the companion FAQ, including the full scanner walkthrough)
• Structuring pages with HTML headings (Composer best practices, useful when a contrast fix also involves restructuring a section)