Dashboard Dark Theme using equal contrast ratio. 🧶
While working on concepts for the Searchie.io dashboard, I found some interesting facts when you need to create a dark theme.
We all know that the contrast ratio between texts and background needs to be at least 5:1 for reading text and a minimum of 3:1 for large titles. Most of us would use a ratio above 12:1 or higher, especially regarding complex pages like dashboards.
But what about other elements like graphs, cards, or that need separation from the background for better usability?
These elements don’t follow text contrast ratio rules, and we should consider their surface size so that users can have a clear picture of what is grouped.
Let me explain...
Card surfaces that need separation from the background should have a lower contrast ratio of at least 1.2:1 or higher. Backgrounds can have lighter or darker tones depending on the situation you are dealing with. What I found is that any color ratio that is lower than 1.2 will pose a risk for clear separation of the surfaces.
When it comes to picking colors for the dark theme I suggest we use the same color contrast ratio as the light theme so we have the same experience in both cases. You can calculate the color contrast ratio by using some of the tools available online.
Graphs contain large (graph area), small (data points), and tiny surfaces (outlines). We need to apply the same design principles to these elements as we do for surfaces and texts. The graph area surface is large, so we'll use a surface color-to-background contrast ratio above 1.2 for clear separation.
The smaller the element is, but important in hierarchy, the higher the color contrast will be. These elements, like thin graph lines and data points, should have at least double the contrast ratio values, and for even smaller components, we need to triple the value to ensure immediate focus for users.
In my case, I used even higher values of 15 and 7.5 to emphasize its importance in the visual hierarchy.
Conclusion:
When designing complex systems like dashboards, I suggest leveraging all design tools available. Use shapes, color shades, and especially color contrast ratios to ensure clear visual communication. Apply lower contrast for less important elements and higher contrast for critical ones to maintain a strong visual hierarchy.