Best Practices - UI

Typography Guideline

Limit your font to 2 typefaces:

  • A primary font that can be more decorative and unique to your app for title
  • A secondary font, preferably a sans serif font for better legibility for all other texts.

Font size:
Use larger font sizes for primary information such as titles to create a better hierarchy.
Use smaller font sizes and font weight for secondary information.

For iOS:
Large title 34pt
Title 28pt
Body 17pt
Caption - Font size should be no less than 11 pts to maintain legibility.

For Android:
Material Design recommends using the type scale generator for creating type scale and corresponding code.

Color and Contrast

Check for contrast ratios for accessibility

You can use a value checker to ensure that the combination of foreground and background color of your app passes the accessibility criteria (online tool you can use: https://contrast-ratio.com) or https://webaim.org/resources/contrastchecker/

WCAG 2.0 guidelines are categorized into three levels of conformance in order to meet the needs of different groups and different situations: A (lowest), AA (mid range), and AAA (highest).

  1. To meet the level AA success criteria:

    • Text smaller than 18 points must have a minimum contrast ratio of 4:5:1
    • Larger text must have a contrast ratio of 3:1 or greater.
  2. To meet the level AAA criteria:

    • Text smaller than 18 points must have a minimum contrast ratio of 7:1
    • Larger text must have a contrast ratio of 4:5:1 or greater.

Dark Color Theme example

📘

Recommendation:

Use a strong contrast between background and foreground colors.

If you use a dark background color button, it is best to use a lighter color font - example below with primary button.

Button Color Contrast example (primary color button)

Colorful Theme example

📘

Recommendation:

You can use different shades of the same color as long as there is a strong light and dark contrast between the foreground and background colors (example with the secondary light green button and dark green text.)

Text doesn’t have to be 100% black (#000000), you can use a dark gray (#444444) over a light background to soften your style.

Button Color Contrast example (secondary button)

Lighter Color Theme example

📘

Recommendation:

You can keep the overall look of your app very minimal and simple as long as you have a strong contrast between the text and the background.

The secondary button should be the receding one and the primary button the most prominent one.

Challenge Details Background and Text Contrast