文字コントラストを改めて考える / Reevaluating Text Contrast

-:$PSQPSBUJPO .BLPUP/BLBOP 3FFWBMVBUJOH5FYU$POUSBTU

• .BLPUP/BLBOP • *BNJOWPMWFEJOJNQSPWJOHUIFBDDFTTJCJMJUZPGUIFQSPEVDUBOEGPSNVMBUJOH BOEJNQMFNFOUJOH6*HVJEFMJOFT • -:$PSQPSBUJPO8FC"DDFTTJCJMJUZ5FBN • :BIPP+"1"/6*(VJEFMJOFT5FBN •
8FC"DDFTTJCJMJUZ*OGSBTUSVDUVSF$PNNJUUFF 8PSLJOH(SPVQ$IBJSQFSTPO • %JHJUBM"HFODZ "DDFTTJCJMJUZ4QFDJBMJTU QBSUUJNF TFMGJOUSPEVDUJPO

8$"(8FC$POUFOU"DDFTTJCJMJUZ(VJEFMJOFTɻ8$͕קࠂ͍ͯ͠Δ΢ΣϒΞΫηγϏϦςΟͷΨΠυϥΠϯ • 8IBUJTUIFJOBCJMJUZPGQFPQMFUPTFF • 8$"(#MJOEOFTT$POUSBTUBOE$PMPS%JGGFSFODFT • 8$"(#MJOEOFTT$POUSBTU3BUJP • 8$"(0CGVTDJUZ"1$" •
$IBMMFOHFTXJUI-*/&:BIPP+BQBOTCSBOEDPMPST • 4VNNBSZ "HFOEB

8IBUJTUIFJOBCJMJUZPGQFPQMFUPTFF

• 1FPQMFXJUIMPXWJTJPOBSFBGGFDUFECZDPOUSBTUTFOTJUJWJUZ • 4PNFQFPQMFDJUFDPNQVUFSTBOEUIF*OUFSOFUBTUIFOVNCFSPOFSFBTPO XIZJUJTEJGGJDVMUUPVTF • $POUSBTUTFOTJUJWJUZEFDSFBTFTXJUIBHF • "GUFSUIFT JUCFDPNFTFTQFDJBMMZEJGGJDVMUUPTFFUIFDPMPSPGUIFCMVF
TZTUFN • *OCSJHIUQMBDFTTVDIBTPVUEPPST UIFDPOUSBTUNBZCFUFNQPSBSJMZMPXFS 8IZJTDPOUSBTUJNQPSUBOU

IUUQTXXXKOKDPKQNFEJBDFOUFSQSFTTSFMFBTFT CZ"3&ZF TJNVMBUJPO 4JNVMBUJOH$POUSBTU%FTFOTJUJ[BUJPO

8$"(#MJOEOFTT $POUSBTUBOEDPMPSEJGGFSFODFT

• 8$"(8FC$POUFOU"DDFTTJCJMJUZ(VJEFMJOFT • (VJEFMJOFTGPSFOTVSJOHUIFBDDFTTJCJMJUZPGXFCDPOUFOU • %FWFMPQFEBOESFDPNNFOEFECZUIF8$ • 8$"(XBTSFDPNNFOEFEJOBOEIBTCFFOVQEBUFEGSPNUJNFUP UJNF •
5IFMBUFTUWFSTJPOJT8$"( XIJDIXBTSFDPNNFOEFEGPS • 8$"(JTDVSSFOUMZCFJOHDPOTJEFSFE 8IBUJT8$"(

IUUQTXXXXPSH538$"( • 8$"(IBEBTJOHMFDPMPSBOEDPOUSBTUDSJUFSJB • 5IFSFXFSFOPTQFDJGJDTUBOEBSET $IFDLQPJOU &OTVSFUIBUGPSFHSPVOEBOECBDLHSPVOEDPMPSDPNCJOBUJPOTQSPWJEF TVGGJDJFOUDPOUSBTUXIFOWJFXFECZTPNFPOFIBWJOHDPMPSEFGJDJUTPSXIFO WJFXFEPOBCMBDLBOEXIJUFTDSFFO &WBMVBUJPOPGWJTVBMEFCJMJUBUJPOJO
8$"(

IUUQTXXXXPSH53"&35 • 5FDIOJRVFT'PS"DDFTTJCJMJUZ&WBMVBUJPO"OE3FQBJS5PPMT "&35 • *UXBTEJTDVTTFEJOUIFUFDIOJDBMEPDVNFOUBUJPOGPSEFWFMPQFSTPG BDDFTTJCJMJUZDIFDLJOHUPPMT • 5IFGPMMPXJOHDSJUFSJBXFSFFTUBCMJTIFEBTBESBGU •
#SJHIUOFTT%JGGFSFODF.PSFUIBO • $PMPSEJGGFSFODFNPSFUIBO 3FWJFXFECZ"&35

8$"(#MJOEOFTT $POUSBTU3BUJP

JIS X 8341-3: 2016 ISO/IEC 40500: 2012 WCAG
2.0 8IBUJT8$"(

$POUSBTU3BUJP 𝐵𝑟𝑖𝑔ℎ𝑡𝑒𝑟 𝑟𝑒𝑙𝑎𝑡𝑖𝑣𝑒 𝑙𝑢𝑚𝑖𝑛𝑎𝑛𝑐𝑒 + 0.05 𝐷𝑎𝑟𝑘𝑒𝑟 𝑟𝑒𝑙𝑎𝑡𝑖𝑣𝑒 𝑙𝑢𝑚𝑖𝑛𝑎𝑛𝑐𝑒 +
0.05 3FMBUJWF-VNJOBODF 𝑅 ∗ 0.2126 + 𝐺 ∗ 0.7152 + 𝐵 ∗ 0.0722 )PXUPDBMDVMBUFUIFDPOUSBTUSBUJP

5IFWBMVFTPG3 ( BOE# GJOE3IFSF 𝑅!"# = 0~255 255 3 𝑅
= 𝑅 + 0.055 1.055 $.& 3 𝑅 = 𝑅!"# 12.92 )PXUPDBMDVMBUFSFMBUJWFMVNJOBODF

QY QY OPSNBM CPME 5IFDPOUSBTUSBUJPEFSJWFEGSPNUIFSFMBUJWFMVNJOBODFJTFWBMVBUFEBDDPSEJOHUP UIFGPOUTJ[FBOECPMEUFYU
$POUSBTU3BUJP$SJUFSJB

*40 &SHPOPNJDSFRVJSFNFOUTGPSPGGJDFXPSLXJUIWJTVBMEJTQMBZUFSNJOBMT 7%5T 1BSU7JTVBMEJTQMBZSFRVJSFNFOUT"NFOENFOU • • *40 &SHPOPNJDSFRVJSFNFOUTGPSPGGJDFXPSLXJUIWJTVBM EJTQMBZUFSNJOBMT
7%5T • • &NQJSJDBMGBDUUIBUQFPQMFXJUIWJTVBMBDVJUZIBWFUJNFTMPXFS DPOUSBTUTFOTJUJWJUZ 3BUJPOBMFGPSDPOUSBTUSBUJP

• 4JODFJUJTBTUBOEBSECBTFEPOMZPOMVNJOBODFUIBUEPFTOPUUBLFJOUP BDDPVOUDPMPSEJGGFSFODFTTVDIBTIVFBOETBUVSBUJPO EFQFOEJOHPOUIFDPMPS DPNCJOBUJPO JUNBZBQQFBSUIBUUIFWJTJCJMJUZBOEDPOUSBTUSBUJPEPOPU NBUDI • 5IFPSBOHFDPMPSJTNPSFMJLFMZUPDBVTFUIBUQSPCMFN 0,
$POGJSN /( $POGJSN 5IFSFJTBEJTDSFQBODZCFUXFFOUIFWJTVBM JNQSFTTJPOBOEUIFDPOUSBTUSBUJP

• $PNCJOBUJPOTPGEBSLDPMPSTTVDIBTEBSLNPEFBSFFBTJMZBQQSFDJBUFE • 5IFQFSDFQUJPOPGDPOUSBTUSFMBUJWFUPUIFTVSSPVOEJOHFOWJSPONFOUJTOPU UBLFOJOUPBDDPVOU 0, $POGJSN 0, $POGJSN %BSLDPMPSTBSFBQQSFDJBUFECZFBDIPUIFS

IUUQTDPNNPOTXJLJNFEJBPSHXJLJ'JMF$*&YZ@HBNVU@DPNQBSJTPO@PG@T3(#@1@3FDTWHΛฤू • -JNJUFEUPT3(#TQBDF • *40DBMDVMBUFTSFMBUJWF MVNJOBODFJOUIFT3(#DPMPSTQBDF • 5IFT3(#TQBDFJTBDPMPSTQBDFUIBU BTTVNFTUIFPVUQVUUPBDBUIPEFSBZUVCF EJTQMBZ
• *UEPFTOPUJODMVEFDPMPSTJOPUIFSDPMPS TQBDFTUIBUDBOCFSFQSFTFOUFECZMJRVJE DSZTUBMEJTQMBZT 6TJOHBOPMETUBOEBSEGPSDPMPSTQBDF

• 0UIFSJTTVFT • 6ODMFBSWBMVFPG • 6ODMFBSTUBOEBSETGPSOPOBMQIBCFUJDDIBSBDUFSTTVDIBT+BQBOFTF $IJOFTF BOE,PSFBO 0UIFSDPOUSBTUSBUJPJTTVFT

8$"(#MJOEOFTT "1$"

IUUQTHJUBQDBDPOUSBTUDPN • "EWBODFE1FSDFQUVBM$POUSBTU"MHPSJUIN • "OESFX4PNFST .ZOEFY JOWFOUTBNFUIPEPGDBMDVMBUJOHDPOUSBTU • $POTJEFSTNPSFGBDUPST TVDIBTGPOUTJ[F
UIJDLOFTT MJOFXJEUI FUD • *ODPSQPSBUFTLOPXMFEHFGSPNWJTVBMTDJFODF 8IBUJT"1$"

• (FOFSBUFQFSDFQUVBMMJHIUOFTTDPOUSBTUGSPNT3(#DPMPSTGPSUFYUBOE CBDLHSPVOE • 5IFCSJHIUOFTTDPOUSBTUDBOCFGSPNUP • 4UBOEBSETBSFTFUCZ-DWBMVFBOEUIFTJ[FBOEUIJDLOFTTPGUIFUFYU -VNJOPTJUZ$POUSBTU -$

IUUQTSFBEUFDIPSH"3$UFTUTWJTVBMSFBEBCJMJUZDPOUSBTU UOSFTPVSDFT -VNJOPTJUZ$POUSBTU -$ BMHPSJUIN

• "JNJOHUPTPMWFUIFQSPCMFNPGPWFSFTUJNBUJOHDPOUSBTUXJUIEBSLDPMPST • "JNJOHGPSQFSDFQUVBMVOJGPSNJUZ • 5IFFWBMVBUJPODIBOHFTEFQFOEJOHPOXIFUIFSUIFCBDLHSPVOEPSUIFUFYUJT MJHIU EBSL •
4PNFUIJOHTBSFUIFTBNFBT8$"( • 'PDVTFTPOUIFEJGGFSFODFCFUXFFOMJHIU BOEEBSLDPMPST • &WBMVBUFEJOUIFT3(#TQBDF 1SJODJQMFPG-VNJOPTJUZ$POUSBTU -$

• -Dd&RVJWBMFOUUPPG8$"( • -Dd&RVJWBMFOUUPPG8$"( • -Dd&RVJWBMFOUUPPG8$"( • -Dd)FBEJOHTBOEPUIFSMBSHF CPMEUFYUBOEQJDUPHSBNTXJUIGJOFEFUBJMT •
-Dd1MBDFIPMEFST FUD UFYUUIBUJTOPUUIFNBJODPOUFOU • -Dd/POUFYUFMFNFOUTUIBUOFFEUPCFJEFOUJGJFE 3FDPNNFOEFEWBMVFTGPS-D BQQMJDBUJPOT

• 5BCMFGPSBTTPDJBUJOHGPOUTJ[FTBOEXFJHIUTXJUI-D • %FQFOEJOHPOUIFGPOUTJ[FBOEXFJHIU ZPVDBODIFDLXIFUIFSUIF-DNFFUT UIFTUBOEBSEWBMVF • *UUBLFTJOUPBDDPVOUUIBUUIFUIJDLOFTTPGUIFMJOF ≈GPOUTJ[FBOEXFJHIU
IBTBHSFBUJOGMVFODFPOUIFQFSDFQUJPOPGDPOUSBTUCZQFPQMF "1$"-PPLVQ5BCMF

IUUQTHJUBQDBDPOUSBTUDPNEPDVNFOUBUJPO"1$"FBTZ*OUSP 'POU 4J[F 3FGFSFODF'POU8FJHIU "70*% /03."-
#0-% QU QY "1$"$POUSBTU7BMVF -D ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ "DUVBM"1$"-PPLVQ5BCMF

$3$POUSBTU3BUJP ʻ ʼ $3 -D $POGJSN $3 -D $POGJSN %FQFOEJOHPOUIFDPMPSDPNCJOBUJPO
UIFSBUJOHXJMMCFSFWFSTFE $3 -D $POGJSN $3 -D $POGJSN &WFOXJUIUIFTBNFDPMPSDPNCJOBUJPO UIFFWBMVBUJPODIBOHFTEFQFOEJOHPOUIF UFYUDPMPSBOECBDLHSPVOEDPMPS 4BNQMFVTJOH"$1"

• *O"1$" UIFDPNCJOBUJPOPGPSBOHFCBDLHSPVOEBOEXIJUFCMBDLUFYUEPFT OPUNFFUUIFDSJUFSJB • &WFOJGUIFFWBMVBUJPODIBOHFTGSPNDPOUSBTUSBUJPUP"1$" JUEPFTOPUNBLF FWBMVBUJPOFBTJFS $3 -D
$POGJSN $3 -D $POGJSN 5IFDPNCJOBUJPOPGEBSLDPMPSTNBLFTJUEJGGJDVMUUPEFWJBUFGSPNUIFBQQFBSBODF BOEFWBMVBUJPO 4BNQMFVTJOH"$1"

• $PNQMFYJUZ • 4JODFUIFFWBMVBUJPOJTCBTFEPOUIFTJ[FBOEUIJDLOFTTPGUIFMFUUFST UIF XPSLCFDPNFTDPNQMJDBUFE • 5IFSFJTBMTPBTUBOEBSEDBMMFE#SPO[F4JNQMF.PEFUIBUJTFBTZUP NJHSBUFGSPN8$"(Y •
3FMJBCJMJUZPGTUBOEBSET • "MUIPVHIUIFFWBMVBUJPOJTCBTFEPOSFTFBSDISFTVMUT JUJTOPUBTGBJSBOE SFMJBCMFBT*40 TPJUJTOFDFTTBSZUPBDDVNVMBUFFWJEFODF "1$"$IBMMFOHFT

$IBMMFOHFTXJUI -:$PSQPSBUJPOCSBOEDPMPST

/BWZ (SFFO 3FE -:$PSQPSBUJPOCSBOEDPMPST

$POUSBTUEJGGFSFODF $PMPSEJGGFSFODF dd $POUSBTU3BUJP d "1$" -Dd QY 3FE 8IJUF
/( /( /( 3FE #MBDL /( 0, /( (SFFO 8IJUF /( /( /( (SFFO #MBDL /( 0, /( /BWZ 8IJUF 0, 0, 0, /BWZ #MBDL /( /( /( 8IFOVTFEBTBCBDLHSPVOEDPMPS JUPGUFOEPFTOPUNFFUUIFTUBOEBSE 7FSJGJDBUJPOSFTVMUTPG-:$PSQPSBUJPOCSBOEDPMPST

• *UJTCBTJDBMMZEJGGJDVMUUPVTFJUGPSUIFUFYUDPMPSPSUIFCBDLHSPVOEDPMPSPG UIFUFYU • *UDBOCFVTFEJOMBSHFMFUUFST • *UJTCFUUFSUPVTFJUGPSQMBDFTPUIFSUIBOUIFUFYUDPMPSBOEDIBSBDUFS CBDLHSPVOE )PXUPVTFCSBOEDPMPST

8IBUUPEPOFYU

• "EIFSFUP8$"(DPOUSBTUSBUJP • $BUDIVQPO8$"(BOE"1$"EFWFMPQNFOUUSFOET • 6TFUIFDIFDLUPPMUPNBLFTVSFUIBUZPVDBOHSBTQUIFDPOUSBTUPGUIFUFYU POBSFHVMBSCBTJT • 0ODFZPVDBOBEKVTUUIFDPOUSBTU DPOTJEFSUIFDPMPSWJTJPODIBSBDUFSJTUJDTBT
XFMM *OPSEFSUPEFTJHOUIFUFYU TPUIBUJUJTFBTZUPTFF

'JHNBT$POUSBTU$IFDL'FBUVSF

8FC"*.$POUSBTU$IFDLFS IUUQTXFCBJNPSHSFTPVSDFTDPOUSBTUDIFDLFS

4VNNBSZ

• 3FHBSEJOHDPOUSBTU IPXUPDIFDLFBDIWFSTJPOPG8$"(XBTFYQMBJOFE • $POUSBTUBOEDPMPSEJGGFSFODFT DPOUSBTUSBUJPT "1$" • $POUSBTUJTBOFMFNFOUUIBUVOEFSQJOTUIF8$"(QSJODJQMFPGQFSDFJWBCMFz •
*UJTJNQPSUBOUUPNBLFUIFUFYUFBTZUPSFBEJOPSEFSUPHFUVTFSTJOWBSJPVT TUBUFTBOETJUVBUJPOTUPVTFUIFQSPEVDU 4FTTJPO4VNNBSZ

5IBOL:PV

文字コントラストを改めて考える / Reevaluating Text Contrast

文字コントラストを改めて考える / Reevaluating Text Contrast

More Decks by LINEヤフーTech (LY Corporation Tech)

Other Decks in Design

Featured

Transcript