tvl-contrast-directive

demo

1

First container has both - text color and background color set by a css class. The contrast ratio meets both WCAG standards.

background: #2C0703

text color: #DA9F93

2

The value of background css property is set to transparent for this container. The directive in this case calculates wih the closest ancestor value which is the background color of this page section - #efefef. The contrast ratio meets the AA criteria level, but it is not sufficient for AAA level.

background: transparent

text color: #B6465F

3

The color of text in this div has not been set by CSS on the element itself. The value inherited from document body element applies in this case and it is also used in the contrast ratio calculation. However the contrast is really poor, it doesn't meet the WCAG standards.

background: #eb4511

text color: #2c3e50 (inherited)

¨