Skip to main content

Synthesis Dark Mode and Accessibility Checker Onboarding

Christopher Parsons
  • Updated

This onboarding video will provide you with the information you need to configure Synthesis Dark Mode, use our new Accessibility Checker, and make your intranet more accessible and inclusive to your users.

Here are the recommended steps contained in this video:

  1. Switch to Dark Mode. Familiarize yourself with the new Dark Mode theme. Dark Mode is only available to Global Administrators and Branding Administrators initially. Once you have finished configuring Dark Mode you can make it available to all users.

  2. Review Dark Mode Colors.  We’re releasing Dark Mode with default Synthesis Dark Mode styles. Each style uses colors which we’ve tested for accessible contrast ratios against a Dark Background. You’ll likely want to change one or more colors to use an accessible Dark Mode color which matches your brand. Further guidance on selecting colors with accessible contrast ratios can be found in this Help Center Article.
  3. Review Dark Mode Logos. We’ve copied your Light Mode logos into Dark Mode. You’ll want to ensure your logos are accessible against the dark background, remove any unnecessary white backgrounds, and consider updating the design or color to to take advantage of the Dark Mode theme.

  4. Review Dark Mode Placeholders. Like Logos, we’ve copied your Light Mode post thumbnail, project thumbnail, and employee headshot Placeholders into Dark Mode. You’ll want to ensure your placeholders are accessible against the dark background, remove any unnecessary white backgrounds, and consider updating the design or color to take advantage of the Dark Mode theme.

  5. Review Custom CSS. If you’ve added Custom CSS to Synthesis, you will definitely want to review your Custom CSS to make sure that it works as expected in Dark Mode and also passes Contrast Ratio testing. Our built-in Accessibility Checker can’t test any colors you’ve specified in CSS.

  6. Review Failing Tests in the Accessibility Checker. Our new Accessibility Checker empowers you to make your intranet more accessible and inclusive to your users by testing Contrast Ratios of both your Light and Dark Mode styles. You’ll want to remediate any failing test by picking new colors with contrast ratios which meet accessibility guidelines. Further guidance on selecting colors with accessible contrast ratios can be found in this Help Center Article and in the “Strategies for Making Brand Colors Accessible” chapter of this video.

  7. Review Your Intranet for Black Images and Icons With Transparent Backgrounds. Black images and icons with transparent backgrounds will be difficult for your users to see against the dark background of Dark Mode. The “Strategies for Black Images and Icons” chapter of this video provides several options for making those images and icons more accessible. We also provide advice in the opposite case — white images and icons on a white background in Light Mode.

  8. Select Your Intranet’s Default Color Mode. The default Color Mode in Synthesis is Match OS, which matches the operating system of your PC, Tablet, or Phone. You can change the default Color Mode for your users to either Light Mode or Dark Mode if you prefer.

  9. Make Dark Mode Available to All Users. Once you are ready to make Dark Mode available to all of your users, you can switch Dark Mode Availability from Global Admins + Branding Only to Available for All Users.

Please send any comments or questions to support@knowledge-architecture.com.