Contrast
Ensuring that there is enough contrast between the color of your text and color of the background is important fo readability. Generally, younger people prefer and find a dark mode website (light text on a dark background) is easier to read, while older readers prefer and have an easier time with the opposite. If you know who the users of your site will be, you can consider that when choosing colors.
There are some WCAG guidelines to keep in mind:
Body Text
Minimum Ratio (AA): 4.5:1
Enhanced Ratio (AAA): 7:1
Large-Scale Text
(This refers to text that is 120-150% larger than body text)
Minimum Ratio (AA): 3:1
Enhanced Ratio (AAA): 4.5:1
Other Elements
(This refers to active interface components and graphical objects such as icons and graphs)
Minimum Ratio (AA): 3:1
Enhanced Ratio (AAA): Not Defined
Text Styling
There are some other important things to remember about styling text to make sure that it is readable and accessible to your users.
Text Size
Your text size at a minimum should be 16 pixels or 1rem (preferred). By default most of the text on your page will display at this size, so it's important to remember not to make the font size smaller. You should also remember that it is better to use ems or rems than pixels for text sizing as those unites respect user preferences for larger font sizes by default.
Line Width
After a point, a line of text becomes too difficult to read when displayed on a wider screen. It's easier for a user to get lost when line widths are too wide. Aim for a maximum text width of approximately 50-75 characters.
Alignment
For text that displays on multiple lines (like a paragraph), ensure that you align it to the left (in English, we read from left to right). Just like lines of text that are too wide harm usability and readability, so does center alignment on text.
Line Height
The line height on your text indicates the amount of space between each line of text. After the CSS Reset, it is reset to a value of one, but it should be somewhere between 1.35 and 1.5 for readability. This can change depending on the font, and you do not have to include units.
Font Readability
Speaking of fonts, make sure you choose font families that are easy to read. Choosing something that is too decorative, or that displays well only at very large sizes makes your site more difficult to read. Imagine driving by a small sign with tiny text and a cursive font. Had a more readable font been used or made larger, you might actually be able to read that sign.
Sizing & Spacing Elements
When you're creating a website that will be viewed on any device, from a smart phone to a large monitor, there are things to consider when styling for the smallest screens. Users interact with touch screens differently than they do with a mouse or track pad.
On those smallest screens, interactive elements needs to be large enough for users to tap on with a finger or thumb, spaced enough that they don't accidentally tap on the wrong thing, and as close as possible to the area of the screen they can reach with a thumb.
Element Size
Without a mouse, clicking on small elements can be difficult. Small clickable elements should be at least 42 pixels (square or rounded). Medium clickable elements should be 60 pixels, and large elements should be 72 pixels.
Element Spacing
Ensuring that your elements aren't crowded on the page also makes them easier to click. The spacing will depend on the size of the element, where smaller elements need more space between them and larger elements need less.
Element Placement
When using a smart phone, there are areas that are easy to reach while holding the device in one hand, and areas that are difficult to reach in the same situation. Placing important clickable elements in places where the user doesn't have to strain to reach them is a good practice.
Other Important Styles
Some styles are removed by the CSS Reset code, (and sometimes developers remove these styles and forget to replace them). These styles are important for usability and accessibility, so you will want to be sure to include them and test them to make sure they work.
Focus Styles
Focus styles indicate to the user which element on they page they are interacting with from their keyboard. Focus should only work for interactive elements (links, buttons, form inputs, details/summary). These use an outline by default, but can be styled differently than the default. An outline on an element does not take up space on the page like a border does. It is not part of the box model.
Hover Styles
Also for interactive elements (those that the user can click on, like links and buttons), hover styles are important. The hover indicates to the user that the element is interactive. These styles should be obvious to the user when hovering. If they are too subtle they can be missed.