Help Centre
Home Websites & Shops MyWebsite Now

Colour contrasts

Valid for MyWebsite Now.

Contrast, or contrast ratio, is the difference in brightness between adjacent colours, e.g. text and background colours. 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 colours 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 colour 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 Centre article "Opening the MyWebsite Now editor".

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

  • In the colour 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 colour contrast and accessibility".

Adjust colour palettes in MyWebsite Now

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

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

  • Click on the Custom tab in the colour menu.

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

Further information

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

Content