Hey Bubble,
Thank you for the screenshots. Images always clarify what others are seeing and referring to, so I will take them as the base for my response.
I grabbed the yellow and green that you mentioned to illustrate their AA ranking (remember we need a minimum of 4.5 contrast value), and used the condition block background color to test. Indeed, if it passes this contrast ratio in the darkest background color for this theme, it will definitely be visible in lighter backgrounds which is what we need:
The yellow in your image fails the minimum of AA accessibility (aka “regular” text for sizes smaller than 18px) landing at 1.57:
The old green falls also short at 2.67. It is brighter, but not better for accessiblity.
Since the background colors cannot be changed, it is the “Light” value in the color hue that has to be modified to create a color that will hit at least 4.5.
Hope these visual examples illustrate these kind of evaluations better!
Kind of related note: These notions of “working with color” and serving human accessibility are covered on Chapters 3 and 4 of the UI/UX Essentials Course in case y’all curious about learning more around UI/UX/Accessibility Design.
