Help Center
Home Websites & Stores MyWebsite Now

Color contrasts

Valid for MyWebsite Now.

Contrast, or contrast ratio, is the difference in brightness between adjacent colors, e.g. text and background colors. For people with impaired vision, or in environments with poor lighting conditions, it is important that this value is sufficiently high. This article explains how to adjust colors in your MyWebsite Now project in order to meet this requirement of the German Accessibility Improvement Act (BFSG).

Please Note

IONOS offers no legal advice and assumes no liability for the completeness and accuracy of the content of this article. If you have specific questions, please contact your legal advisor.

Recommendations for color contrast and accessibility

  • The contrast ratio is expressed as a ratio where the brighter value is divided by the darker value. The result is between 1:1 (no contrast) and 21:1 (maximum contrast).

  • The WCAG defines two minimum requirements for accessible web content: A contrast ratio of at least 4.5:1 is required for normal text and at least 3:1 for text with a large font size.

  • For images and user interface components, such as input fields or placeholders, the contrast ratio should be at least 3.1.

  • There are numerous browser extensions or websites to check your MyWebsite Now project. On the pages of the W3C Web Accessibility Initiative (WAI) you will find a list of accessibility testing tools.

Increase contrast intensity in MyWebsite Now

  • Open the MyWebsite Now editor as described in the Help Center article "Opening the MyWebsite Now editor".

  • In the menu bar of the MyWebsite Now editor, click on Design > Colours .

  • In the color menu, scroll all the way down to the Contrast intensity section and select one of the available values.

  • Check your settings with a test tool. You can find a source for test tools in the previous section "Recommendations for color contrast and accessibility".

Adjust color palettes in MyWebsite Now

  • Open the MyWebsite Now editor as described in the Help Center article "Opening the MyWebsite Now editor".

  • In the menu bar of the MyWebsite Now editor, click on Design > Colors .

  • Click on the Custom tab in the color menu.

  • Specify the accents of the color palette individually to achieve higher contrasts. Select colors that are not too similar.

Further information

In the Help Center article "Overview of accessibility for MyWebsite Now" you will find further information on how to make your MyWebsite Now project accessible.

Content