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: or

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



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



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



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