Introduction
This week we are continuing our design theme by making a report about report design. Color is a very important element in report design. Color contrast is not only important for accessibility, it’s also an element of visual hierarchy. You can also use color contrast as a way to make elements on your report page “pop”.
Color contrast is measurable. My favorite desktop tool for measuring color contrast is Colour Contrast Analyser. We can generally use the WCAG 2.1 guidelines to help us attain good color contrast. We want text to have a color contrast of at least 4.5 from its background. And we want non-text elements (such as bars in a bar chart) to have a color contrast of at least 3 from their background.
While online color calculator websites are good, we can also make a color contrast calculator in Power BI. We will generate the dataset using Power Query (creating all the data from a list of numbers with no external data source). Then we’ll add some DAX measures to determine whether two selected colors should be used together in a Power BI report
Requirements
- Generate your color dataset in Power Query (or use the Power Query scripts provided here). You must create a color table that contains the following columns: R Dec, G Dec, B Dec, Hex, and Luminance. These are the decimal values that represent the red, green, and blue portions of each color, the hex value that represents the whole color, and the luminance calculated for that color. There should be one row per RGB color value (0,0,0 to 255,255,255). As an example, the color #007E97 is dark cyan. The corresponding row in the color table would have the following values: R Dec: 0, G Dec: 126, B Dec: 151, Hex #007E97, Luminance: 0.171560745755311.
- To calculate luminance, you must first linearize the RGB values before using the formula L = 0.2126 * R + 0.7152 * G + 0.0722 * B. This is all done for you in the provided Power Query scripts if you would rather not get this deep into color math.
- Create a report that allows a user to choose 2 colors. The report should display the hex value, RGB value, and luminance for each selected color.
- Create DAX measures to calculate the contrast ratio of the two colors and give advice on their usage in Power BI. The guidelines for the advice are:
- Less than 3: Not enough contrast for text or non-text content, use only for decorative items
- Greater than 3 and less than 4.5: Appropriate for large text at least 18pt, bold text at least 14 pt, or non-text content
- 4.5 or greater: Appropriate for any size text and any non-text content
- Add 4 SVG images to the report that show what the two colors look like as foreground and background for text and for a chart element. (Hint: you want to create dynamic SVGs using DAX measures.)
- The SVG used in the example report is: <svg xmlns=’http://www.w3.org/2000/svg’ width=’100′ height=’100′ viewBox=’0 0 24 24′ style=’background-color:#FFFFFF’><path fill= ‘#000000’ d=’M7 19h-6v-11h6v11zm8-18h-6v18h6v-18zm8 11h-6v7h6v-7zm1 9h-24v2h24v-2z’/></svg>
- Feel free to use the same SVG or to create your own
Dataset
This dataset is generated entirely in Power Query! You can use the Power Query scripts provided here or create the M script yourself.