Viva Magenta is not the newest member of the Viva Product family. Every year the Pantone Color Institute announces the colour for the next year around the same time. Next year’s colour will be a colour named Viva Magenta. Official HEX colour code #BE3455.
I proudly announce the Viva Magenta colour theme suite, which comes in the following flavours. Let’s bring a refreshing new look using this next year’s colour to SharePoint. Also, we like to keep an eye on accessibility.
Viva Magenta – Light
Is a theme that uses Viva Magenta as the primary number for text and buttons on a white background.
Viva Magenta – Light Theme Preview on communication site
Viva Magenta – Light Theme Preview on a team site
The colour contrast ratio is for all elements on page 5.51:1.
Shows contrast check result
In regards to colour contrast, it meets a WCAG 2.1 AA requirement.
Viva Magenta – Dimmed
Preview of Viva Magenta dimmed design on Communication Site
Preview of Viva Magenta dimmed design on Team Site
It is a little bit more settled than the Viva Magenta colour theme. It comes with a black high-contrast text colour with a colour contrast of 21:1 for text on a white background.
The Viva Magenta highlights have a colour contrast of 5.51:1 again.
The colour contrast also meets one of the WCAG 2.1 AA criteria.
Viva Magenta – Dark
Preview of Viva Magenta dark design on Communication Site
Preview of Viva Magenta dark design on Team Site
Is the inverted theme of Viva Magenta Light.
Colour Contrast Test result with Viva Magenta Background and white text
The colour contrast of this inverted theme remains at a solid 5.51:1. The colour contrast requirements of WCAG 2.1 AA are fulfilled.
Viva Magenta – Fancy
This theme is based on the Viva Magenta Dark but got some additional highlights through a bright yellow colour. The yellow was taken out of a triadic colour schema.
Preview of Viva Magenta Fancy Theme – on Communication Site
Preview of Viva Magenta Fancy Theme – on Team Site
The yellow colour on the Viva Magenta background has a solid 4.59:1 contrast ratio and also fits well with the general WCAG 2.1 AA contrast rules.
Colour contrast test result of Viva Magenta Fancy Theme
Conclusion
Soon to welcome 2023 – The colours for this year we already have.
All four themes are available for download and meet the WCAG 2.1 AA contrast rules. In the first test, everything was well-readable. Especially the dark solid background colour can be a little bit stressful.
It’s been a while since I used the theme generator because most of my customers have already those established for a long time.
Overall I like the result of these quickly put-together themes. Still, they also show some weaknesses in the Microsoft Design because, for example, the cards of the Activity web part vanish with the background.
Vanishing Activity Web Part
This problem is not as dominant on the white background but also happens there.
Vanishing Activity Web Part
Download
Download the Viva Magenta Themes