(question copied from https://graphicdesign.stackexchange.com/questions/162197/need-help-with-a-color-coded-design since commenter there suggested this is the appropriate forum)
I am but a simple BA, and I am currently working on adding functionality to an existing web application. I am told there is no budget for a UI designer! So I had to design this myself.
On this page, the user will make selections in both dropdowns, and then click Calculate. That will generate the charts based on her selections.
Here's a conceptual mock-up. (I changed content and colors to protect proprietary information).
Now, some charts are dependent on the first drodpown only, some are dependent on the second dropdown only, and some are dependent on both. We would like to visually indicate which charts are which. Our solution was with color coded-badges in each chart that indicate the dropdown selection(s) that contributed to that chart.
In this mock-up, the first chart is dependent on both dropdowns, but the 2nd chart is dependent only on the 2nd dropdown.
My difficulty is how to tie the dropdowns to the badges. I attempted to do that by encasing the label above the dropdown in the appropriately colored shape. But I am unhappy with the results, and I believe that it is a non-standard design practice.
How else can I tie the first dropdown to the dark blue badges, and the 2nd dropdown to the purple badges?