I noticed when working with iPhone and iPad keyboards that they are quite a significantly different colour:

enter image description here

Is there any particular reason for this?

  • 5
    They put the little protrusion on the f key for a flat touch-screen. Just pointing it out. Commented Jan 20, 2012 at 16:39
  • Yes I know, I find this very amusing. I expect the percentage of people that own iPads and know what that nubbin is for is very small indeed.
    – fredley
    Commented Jan 20, 2012 at 17:06
  • @naoise...funny! I had never noticed that. Theories 1) habit 2) funny easter egg type detail 3) apple does have a patent on tactile touch screens...perhaps a leak of something coming in the iPad 3?
    – DA01
    Commented Jan 20, 2012 at 17:14
  • 2
    @DA01 actually it's probably because they recommend adding physicality to their UIs Commented Jan 20, 2012 at 17:17

2 Answers 2


The most important difference seems to be the contrast between the key background and the letters. Note also that the font on the iPhone keyboard is bold while the iPad's is not.

The iPhone is much smaller and likely to be used outdoors so the extremely bright off-white shade of the keys makes sense. Black-on-White is ideal for outdoors, though the iPad's Black-on-Grey looks more elegant and frankly more real.

The background color was probably picked just to accent the key colors on both platforms; the iPhone's colors are more bright and artificial, so the brighter bluish gray makes sense. The iPad's grey keys work well on the warmer but darker looking grey background it uses.

Note the default iPhone UI is very bluish gray and grayish blue1: enter image description here

The default iPad UI elements are less monochromatic2: enter image description here

The blue fits in with the default iPhone UI elements quite well with it's slightly washed out blue-gray. Consistency seems to have been more important in the iPhone UI defaults.


Higher contrast to compensate for smaller size and smaller gutter space?

Side by side in (more or less) real-life proportions it makes more sense to me:

Side by side in (more or less) real-life proportions

  • That doesn't explain the difference in hue. The iPhone keyboard is much greener.
    – fredley
    Commented Jan 20, 2012 at 14:41
  • 1
    I was going to say something along these lines (based on the fact that the iPhone probably gets used more outdoors than an iPad?) - until I checked out the actual contrast values. The buttons and the background are both gradients - and the contrast would actually be better if the colour of the bottom of the gradient on the background of the iPhone were the same colour as on the iPad - while the opposite is true at the top of the background gradient. So the reason can't be for contrast! Commented Jan 20, 2012 at 15:14
  • 1
    @BenBrocka - yup - see here Commented Jan 20, 2012 at 15:33
  • 1
    @RogerAttrill I meant your statement "the reason can't be for contrast"; apparent contrast can be a different thing, as the classical contrast illusion shows. I bet if you ran a survey most would find the iPhone to have significantly higher contrast.
    – Ben Brocka
    Commented Jan 20, 2012 at 15:36
  • 1
    Oh yes - it does have significantly higher contrast - but my point was that it could be even higher contrast if the bottom colour of the background was left as it is on the iPad. Thus - the use of the blue hue could not be for contrast - i.e. they have sacrificed a little extra contrast in order to fit in with the blueish grey colour scheme that you describe most excellently in your answer :-). Commented Jan 20, 2012 at 16:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.