Having text that meets WCAG requirements does not just mean using contrasting colors, as there is also an interaction with the size of the font. Smaller fonts require colors that have a higher contrast compared to the background color they are placed on. Although not a technical requirement, line-height and spacing can also affect readability, especially with smaller font sizes.
To make it as easy as possible to maintain accessibility as well as a harmonious design aesthetic, we have
combined several CSS properties together using the semantically relevant "focus-priority" class name. The
"focus-priority" classes range in value from .ee-focus-priority-1
to
.ee-focus-priority-9
and represent the visual hierarchy that you wish to impart on your
application. Elements with a higher "focus-priority" are ones that a user should see and read first and
therefore use larger font sizes, but can get away with using lower contrast colors. Elements with a
lower "focus-priority" are ones that a user should see or read after other elements and utilize smaller font
sizes, but higher contrast colors to remain accessible. This of course is subjective and these styles can be
applied solely to adjust appearance as desired.
Each theme can specify a marginDefault
property which gets applied to a set of default margin
sizes to dynamically generate a total of 9 margin sizes. If themes require more control, they can also define
all of the marginSizeModifiers
separately. The results are the following CSS variables:
Each theme can specify a paddingDefault
property which gets applied to a set of default padding
sizes to dynamically generate a total of 9 padding sizes. If themes require more control, they can also define
all of the paddingSizeModifiers
separately. The results are the following CSS variables:
Each theme can specify a radiusDefault
property which gets applied to a set of default radius
sizes to dynamically generate a total of 5 radius sizes. If themes require more control, they can also define
all of the radiusSizeModifiers
separately. The results are the following CSS variables: