Does dynamically changing text color meet accessibility requirements?


My website has text that changes color as you scroll. Text at the bottom of the screen is lightly colored, and is below minimum contrast. However, as the user scrolls, the text becomes darker and meets minimum contrast once it reaches the top half of the screen. Does this pass the minimum contrast success criteria?


The text contrast behavior you describe sounds like it would technically meet WCAG’s color contrast requirements, since there is a mechanism to adjust the text to reach minimum contrast, but there are a few things to keep in mind.

The user must be able to scroll to bring all text on the page to minimum contrast in the following scenarios:

  • When the user is scrolling using keyboard alone
  • When the user increases font size by 200%
  • When the user zooms the browser to 400% (starting at 1280 CSS pixels wide & 1024 CSS pixels high, or equivalent to 320 CSS pixels wide and 256 CSS pixels high)

In terms of user experience, consider providing a way for users to turn off the color changing behavior so that all visible text reaches minimum contrast. While this interactive text color change may be technically conforming, some users are likely to either miss the method for increasing contrast or to miss the low-contrast text entirely.

For additional help reviewing color contrast of text, graphics, and more, explore the WCAG Color Contrast Checker from Accessible Web.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.